VUE项目部署Niginx

最新推荐文章于 2024-10-10 08:00:00 发布
最新推荐文章于 2024-10-10 08:00:00 发布
阅读量220 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35260752/article/details/131700266
版权
本文介绍了如何使用npmrunbuild命令对Vue项目进行打包，打包后的文件存储到nginx的html目录下。接着，文章讲解了Nginx的配置，特别是针对nginx.conf文件的修改，以适应项目需求，同时提到解决80端口被占用的问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、Vue项目打包命令

npm run build

在这里插入图片描述
打包后的文件存放至nginx目录中的html文件夹内

二、Nginx设置

在conf文件夹中找到nginx.conf文件
在这里插入图片描述
nginx.conf文件中修改要修改以下2处内容
在这里插入图片描述
启动 cmd 运行，第一条报错是因为电脑本身80端口被占用
在这里插入图片描述

nginx 部署前端项目的详细步骤（vue项目build打包+nginx部署）_前端工程打包部署到nginx
2401_84437170的博客
04-28 765
server {# 自定义监听端口# 浏览器访问域名serverserverroot dist;
《Nginx怎么部署vue项目》
GoppViper的博客
09-06 1891
打开cmd，输入重启命令：nginx -s reload （若配置文件没做修改可忽略这一步）好了，以上就是《Nginx部署vue项目》的全部内容，关注我看更多有意思的文章哦！完成上一步后，打开我们的配置文件，找到节点，修改参数。另外，多版本的nginx可以共存，只要设置web端口不一样就可以同时使用。到前端项目目录下，找到文件夹。复制下的文件，粘贴至nginx根目录下的。在vue代码目录下运行命令：npm run build。conf目录下有默认配置文件nginx.conf。
Vue+Nginx 部署
weixin_41643257的博客
01-12 969
Vue脚手架的搭建 安装nodejs brew install nodejs 安装成功之后，查看nodejs版本 node -v 安装国内淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack包 cnpm install webpack -g 安装Vue脚手架 cnpm install vue-cli -g ...
Vue-Mixin
qq_45882139的博客
06-20 2963
Vue框架现在基本上已经占据了前端的半壁江山，Vue的数据驱动和组件化的思想深入人心。Vue全家桶可能很多小伙伴都比较熟悉，在工作上也用得比较得心应手。但是今天讲的Vue中这个Mixin的用法我相信还有很多小伙伴不知道或者没有用过，或者有些小伙伴接手别人的Vue项目时看到里面有个Mixin文件夹，也会用，但是一直都是云里雾里的状态，今天我们就好好聊聊Mixin，争取以后不在犯迷糊。想要使用一个事物或者工具，我们首要先了解它是什么，这样我们才好对症下药。......
vue打包并部署到nginx上
weixin_45150813的博客
04-27 7550
nginx部署vue项目
vue项目如何部署到nginx服务器
热门推荐
田兴的博客
11-12 3万+
mac下安装nginx 安装工具： homebrew（还没用过的小伙伴可以点链接进行了解或者自行百度） 步骤： 1、打开终端，习惯性命令：更新 brew update 2、终端继续执行命令： brew search nginx //查询要安装的软件是否存在 3、这里我们多执行一步“废”命令，不过有利于我们后面的配置： brew info nginx 我们可以看到，nginx在本地还未安装（Not installed），nginx的来源（From），Docroot默认为/usr/local/v
前后端分离项目部署，vue--nagix发布部署，.net--API发布部署。
TangMonk的博客
07-23 599
连接池配置：pooling=true;
Vue + Nginx 项目部署 （亲测有效）
蜂窝码农的博客
03-25 8986
前言 笔者最近初学Vue，编写前端项目。写好一个简单项目后发现，项目不能简单通过Nginx做反向代理并被其他人访问。举例，本地启动vue项目，然后在Nginx里配置 nginx.conf worker_processes 2; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.... 你需要在项目的根目录新建一个 vue.config.js, 添加如下内容： ... module.exports = { baseUrl: isProd ? '/baseXXX/' : '/', .... } 这里需要注意的是 dev 环境下不需
vue项目部署到nginx服务器踩坑记录
jasmine_xe的博客
05-13 1251
大概是脑袋抽抽了吧，某个不那么清醒的下午，对，就是昨天下午，我萌生了想要将之前写的一个vue项目部署到nginx上的这个想法。然后就一发不可收拾地开始bug-debug的过程。现将实现过程遇到的各种错误总结一下，希望看到的童鞋之后可以顺利部署，不要走我那么多弯路~ 正常流程 1、 vue项目 执行 npm run build ，生成dist文件夹。 2、 安装nginx，点击这里去往官网：nginx官网。 3、 不同版本（我选的1.20.0稳定版）。 4、下载并解压到本地，注意，不要放在中文目录下！！！.
使用nginx部署vue项目及常见问题
ywp2021的博客
03-07 3815
1.5 还有一个是 conf 文件夹里面是放配置文件的，主要是用 nginx.conf ,里面找到 serve 这个对象，listen 80 这个是设置端口号，里面还有一个。http://192.168.1.91:8080/这个就是后端的接口， 作用是在nginx 下设置代理。解决方法：使用nginx服务器运行，并在nginx服务器的配置文件中，进行代码配置。查看关闭log：taskkill /f /t /im nginx.exe。解决方法：将dist文件夹的内容，放到nginx服务器运行即可。
多个vue项目部署到nginx服务器
qq_43548590的博客
09-07 1937
在同一域名下。多个项目部署到nginx服务器。
Vue项目打包部署Nginx服务器及问题
nalanxiaoxiao2011的博客
07-22 830
把打包好的文件上传到服务器，我部署的位置是：/home/ruoyi/projects/ruoyi-ui。另外还得加一个static.xxxnginx.conf 路由前端用到的图片路径。执行完后会在dist目录生成相关的打包好的文件。至此服务就部署成功啦！
vue项目打包部署nginx（全流程）
m0_53525025的博客
02-09 1899
nginx 部署vue 项目全流程
JavaWeb——Vue：打包部署（Nginx、目录介绍、部署及启动、访问 ）
最新发布
li13437542099的博客
10-10 2467
解压完毕后，介绍一下 Nginx 的安装目录。主要有四个目录：conf用来保存 Nginx 的配置文件；html是用来存放静态资源文件的，如果要部署一些静态资源，比如 CSS 文件，就可以将这些文件放在这个目录下；logs存放的是 Nginx 运行的时候所产生的一些日志文件；临时文件的存放目录temp；最后还有一个 nginx.exe ，这个是 Nginx 的可执行文件，启动 Nginx 就要通过这个来启动。
vue项目常用的nginx配置
kanbe_kotori的专栏
09-06 831
upstream backend { server 127.0.0.1:7052; } server { listen 80; server_name domain.com www.domain.com; client_max_body_size 10m; root /usr/share/nginx/project_dir; l...
小白Vue3+Nginx实现部署
Sumuxi9797926的博客
12-09 1万+
记录一下自己想搭建一个自己的个人网站的心路历程，其实我刚开始的落脚点是找一个别人的半成品或者成品，再慢慢的改，想把主要的精力放在后台上面，找了很多网站之后，例如,，不是项目很久没有维护了，就是好看的没有适合我的🙃（怪我，太菜了~傻狗哽咽🐮🐴），最后还是决定用vue3自己从0开始学，开始搭建。
nginx部署vue项目及nginx配置
lhyxm的博客
11-29 5774
nginx部署vue项目,vue.conf.js配置文件默认配置publicPath为根路径。，只需要打包好dist包，部署nginx即可，根据前端配置好的axios请求前缀。），需要在vue.conf.js配置文件配置publicPath，例如。时，需要配置配置nginx的location选项，将location的。不然会出现报错，找不到服务器静态资源。的方式请求nginx获取服务器的静态资源，(，配置拦截，跳转代理的后台接口即可。),而使用alias配置时，会使用。)之后，root配置会使用。
SpringBoot+Vue项目部署Linux服务器全攻略
"SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解" 这篇文章提供了一个详尽的步骤指南，教你如何将一个结合了SpringBoot和Vue技术的项目部署到Linux（具体是CentOS 7.5）服务器上。对于Java开发者来说，...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值