vue 打包项目部署到nginx

最新推荐文章于 2025-07-01 15:31:34 发布
最新推荐文章于 2025-07-01 15:31:34 发布
阅读量1.6k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： vue打包项目部署到nginx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lucky_ly/article/details/88901546
本文介绍如何通过修改配置文件解决Vue项目部署中的404问题，并提供详细的步骤指导如何进行项目打包及使用nginx进行部署。

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

1.修改vue项目的config下的index.js(修改assetsPublicPath:’./’ ,否则会出现404)

在这里插入图片描述
在这里插入图片描述

2.打包项目

npm run build

3.部署

3.location匹配的根目录指向生成的dist文件即可
在这里插入图片描述

4.启动nginx

在这里插入图片描述

Vue项目如何打包并部署(nginx)
m0_67402774的博客
06-18 9139
我们常使用前后端分离项目时,会需要将前端vue打包然后部署。vue项目其实可以直接通过一下语句进行打包： 默认打包情况如下:当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置:1.首先在项目根目录下创建vue.config.js文件配置内容如下所示(附带跨域问题解决): 2.查看路由中(router/index.js)是否使用history,是的话修改为hash。或者将mode直接注掉，因为默认使用hash。 然后再次使用npm run build进行打包就会出现test文件夹,已经其中静态
将打包好的vue项目部署到nginx上
weixin_37883657的博客
07-20 2059
目录 1、安装 nginx （我的虚拟机系统是 centos7） 2、配置 nginx 3、nginx 其他命令 准备环境： 购买一个虚拟服务器：https://www.ucloud.cn/site/active/lagou.html； 准备好一个vue项目：我的项目资源（https://gitee.com/daisy_yangyang/fed-e-task-04-02） 在虚拟机上安装 nginx 1、安装 nginx （我的虚拟机系统是 centos7） （1）下载本地下...
vue打包部署nginx 配置
01-24
vue开发完毕，打包之后上线，传到nginx服务器配置问题解决
Nginx部署前端Vue项目
最新发布
2501_92635873的博客
07-01 934
通过以上步骤，你的Vue.js项目已经优雅地跑在Nginx上，从打包、上传到配置HTTPS，全程丝滑！Nginx不仅是你的“超级服务员”，还是安全和性能的保障。细心配置：Nginx的每行配置都是“指令”，写错了服务员会“罢工”。安全第一：HTTPS是标配，小锁一亮，用户和老板都夸你靠谱。日志为王：遇到问题别抓瞎，日志里藏着真相。现在，端起奶茶，打开浏览器，看看你的Vue应用在云端闪耀吧！部署成功的感觉，就像吃到刚出炉的蛋糕，甜到飞起！
vue打包并部署到nginx上
weixin_45150813的博客
04-27 7633
nginx部署vue项目
vue打包部署到nginx上
qq_33886821的博客
11-10 371
Hello,大家可以关注一下本人最近开发的小站点,欢迎访问 第一步。vue的配置改变 第一处改变地方 第二处改变地方：./是从项目根路径去访问 /是从当前目录去访问 第二步。输入打包命令 npm run build 第三步。复制dist文件到nginx的html文件下 最后一步。配置nginx 改成nginx下的html目录下路径 ...
【前端】【vue】【nginx】nginx部署vue打包的前端项目
初叙
08-12 2552
描述：从未部署的vue项目，开始准备了tomcat和nginx，最后发现nginx比较方便，nginx部署的话只准备nginx就可以了。 nginx部署过程： 1、下载nginx的压缩包，直接解压到目的路径就可以。 2、将vue项目打包后的文件夹放在nginx安装路径下的html文件夹中。 3、配置nginx的配置文件（\conf\nginx.conf） 如图，改三个地方 （1）项目启动地址端口： listen：vue启动端口 ...
vue项目部署到nginx/tomcat服务器的实现
10-16
总结来说，Vue项目部署到Nginx或Tomcat服务器的主要步骤包括修改路由模式、配置服务器以处理history模式下的前端路由、打包Vue项目、在服务器上配置存放静态资源的目录，并确保web.xml中的错误处理设置能正确处理...
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
总结来说，解决Vue打包部署到Nginx时CSS样式不生效的问题，需要关注Vue CLI的打包配置（尤其是`assetsPublicPath`），以及Nginx的MIME类型配置。正确设置这些参数，可以确保CSS和其他静态资源被正确地服务和解析，...
vite+Vue3项目部署到 Nginx详解
cuijiying的博客
01-18 1900
VUE3项目部署到Nginx时，Vite项目的base配置项非常关键，因为它决定了生成的静态资源路径。通常情况下，Vite构建后的项目会输出到一个dist目录，你需要将这个目录部署到Nginx的特定路径下。通过正确设置base，可以确保在Nginx上的路径能够正确加载资源。
vue3 快速入门 (七) : Vue打包并部署到Nginx服务器上
朱豪凯的博客
08-11 5747
介绍vue3中怎么打包，并部署到Nginx服务器上
vue项目打包部署nginx（全流程）
m0_53525025的博客
02-09 1918
nginx 部署vue 项目全流程
JavaWeb——Vue：打包部署（Nginx、目录介绍、部署及启动、访问 ）
li13437542099的博客
10-10 2537
解压完毕后，介绍一下 Nginx 的安装目录。主要有四个目录：conf用来保存 Nginx 的配置文件；html是用来存放静态资源文件的，如果要部署一些静态资源，比如 CSS 文件，就可以将这些文件放在这个目录下；logs存放的是 Nginx 运行的时候所产生的一些日志文件；临时文件的存放目录temp；最后还有一个 nginx.exe ，这个是 Nginx 的可执行文件，启动 Nginx 就要通过这个来启动。
前端vue项目——打包部署（nginx中部署静态资源）
岁岁岁平安的博客
08-10 1948
前端人员开发前端，后端人员开发后端的java工程，最终要将开发完毕的前端工程和后端工程分开部署在对应的服务器上（前端流行的nginx）（3）如果发现没有启动成功，就要查找是否有其它的应用占用端口号80，如果是系统占用，就只能修改nginx让其启动时占用其它端口号。（可以把html目录里默认存在的2个html文件删除，然后将刚刚上面的打包的全部文件复制进去）4、在任务管理器查看是否有nginx进程，若有，就可以去浏览器访问nginx部署的前端工程。（1）这次我学习的nginx里面的部署前端的静态资源。
vue项目打包后部署到nginx
weixin_43817709的博客
12-11 2101
之前写的文章《vue接通后端api以及部署到服务器》 发现有人问到vue项目打包后dist文件夹怎么部署？所以，就有了这篇文章，也是对之前写的文章做一个补充吧！ 1.要下载nginx,然后解压。这里已windows版本为例，.zip后缀的才是windows版本。下载地址 解压后，运行cmd,去到nginx根目录,执行启动命令 nginx在windows系统下有三个常用的命令 启动命令 start nginx 强制停止命令 nginx.exe -s stop 重启命令 nginx.exe -s reloa
vue-cli打包到部署到nginx服务器
发光吖的博客
07-09 464
vue-cli打包到部署到nginx服务器 原文地址：https://www.cnblogs.com/mmzuo-798/p/9273754.html 最近公司把云平台产品用vue 前后端分离的框架来写，前面大部分开发都比较顺利，后面打包部署出了bug 现在记录下自己遇到的哪些坑 1，我直接npm run build 打包出来，打开dist目录下面的index.html 空白页，页面上出现  no "NODE ENV"是我打包时没有指定打包到哪个环境 正确打包是
vue3打包部署nginx服务器上
weixin_42147289的博客
01-03 669
环境：下载可以看我之前的nginx下载的博客解压后双击 ，可以看到一个一闪而过。 接着打开浏览器，输入，回车，可以看到如下画面，说明启动成功了。在package.json路径中执行命令：npm run build进行打包将文件夹复制到的根目录下用记事本打开文件，在节点下配置如下代码location / { root dist; index index.html index.htm; }若前后端存在跨域，nginx配置文件中需要配置代码locat
Vue项目打包部署总结配合nginx部署
weixin_52901235的博客
03-10 3233
启动后，正常情况下，直接访问http://服务器ip 或 http://域名 （本文测试用的服务器没有配置域名，所以用ip，就本文而言，域名和ip没有太大区别）应该就能看到nginx服务器的默认页面了——如果访问不到，有可能是你的云服务器默认的http服务端口（80端口）没有对外开放，在服务器安全组配置一下即可。之前的步骤已经介绍了怎样配置nginx指向我们创建的文件夹，剩下的问题就是怎么把打包好的文件同步到服务器上指定的文件夹里，比如同步到之前步骤中创建的/www。H5新增了history的。
vue项目打包部署到nginx
04-28
1. 首先，您需要在本地使用命令 `npm run build` 打包您的 Vue 项目，这将生成一个 `dist` 目录，包含了静态资源和打包好的应用程序代码。 2. 将 `dist` 目录下的所有文件上传到您的服务器上。您可以使用 FTP 工具...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值