vue项目部署到nginx 非根目录下

最新推荐文章于 2024-08-02 18:11:18 发布
最新推荐文章于 2024-08-02 18:11:18 发布
阅读量1k 收藏 4
点赞数 1
文章标签： vue.js nginx 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiaojunt/article/details/131854075
版权
文章讲述了如何将Vue项目通过VueCLI打包，并设置vue.config.js中的publicPath适应子路径部署，例如https://www.xxx.xxx/dist/。打包后的dist文件夹直接放入Nginx相应目录，并配置server路径为/dist。同时，文章提醒注意页面刷新时的404问题，解决方法是配置Nginx重定向至/dist/index.html以避免错误。
摘要由CSDN通过智能技术生成 
   将vue项目打包部署到nginx是咱们最常用的vue项目的部署方式，默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上 例如 https://www.xxx.xxx/，如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如将应用部署在 https://www.xxx.xxx/dist/ 这个目录上，就需要修改配置如下：

vue.config.js文件中修改配置 publicPath 属性的值：如图
在这里插入图片描述
修改完直接npm run build 打包即可
最后将dis文件夹直接仍到nginx 对应的目录下，配置server 路径为：/dist
![在这里插入图片描述](https://img-blog.csdnimg.cn/ec3759c1a5dc41ac840023a634c30d28.png#pic_center在这里插入图片描述
最后一个问题，页面刷新404
处理方式，简单粗暴，上图
在这里插入图片描述
注意：路径是 /dist/index.html 而并非 /index.html (是个坑，本人已踩过)→OO→

今天吃麻辣烫
关注
项目nginx部署到非根目录下vue配置
lilongwei4321的博客
07-23 1万+
1、修改config/index.js 2、修改路由route/index 3、若index.html有引入static中的 js 和images需要配置 webpack.dev.conf.js 和 webpack.prod.conf.js         配置webpack.dev.conf.js ，大概在55行左右增加path配置 new HtmlWebpackPlugin(...
解决vue项目nginx部署到非根目录下刷新空白的问题
12-09
1、修改config/index.js 2、修改路由route/index ...以上这篇解决vue项目nginx部署到非根目录下刷新空白的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue应用在nginx非根目录下的部署
PaulXerxes的博客
05-05 3370
一般部署node-moudle的vue应用在nginx上，直接将dist中打包好的文件部署在根目录'/'下并写好路由就可以正常运转了，但是非根目录下还要对webpack的打包路径、静态资源路径做一些修改，要不然服务器就找不到文件了= = 现在假设我们需要在服务器的/doge路径下部署vue应用，需要经过以下几步配置~ 1.项目router配置 如果项目有配置router，在/router/ind...
【nginx 非根路径部署】
最新发布
Aspiring_boy的博客
08-02 441
nginx 非根路径部署
Nginx部署vue项目history的路由模式（非根目录）
qq_28016751的博客
12-16 4697
vue的路由分为两种hash和history，hash路由虽然不需要做太多的配置但是url地址上会有一个很丑的#号。 而history模式的路由不会有这个#号但是带来的问题却是刷新页面之后会404找不到页面，原因是spa单页面是通过js来进行跳转的。浏览器根据路由地址是找不到服务器上相关的文件的，所以这里需要进行相应的服务器配置。 这里我选用的是nginx服务器。 VUE项目(我的vue-cli版本4.x) 1. vue.config.js 2. router.js 3. nginx配置..
VUE项目部署（Nginx代理：根目录与非根目录部署）
06-10 8037
nginx部署vue项目：根目录部署与非根目录部署
VUE项目非根路径部署（nginx）
u012064533的博客
01-08 2625
1、首先贴上nginx配置代码 location ^~ /vue/ { limit_except GET POST {deny all; } proxy_set_header Host localhost; proxy_set_he...
vue部署 nginx非根目录部署
linlinzzzzz的博客
02-08 670
【代码】vue部署 nginx非根目录部署。
vue项目部署到nginx/tomcat服务器的实现
10-16
在进行Vue项目部署到Nginx或Tomcat服务器的过程之前，需要了解一些基本概念。Vue.js是一种流行的前端JavaScript框架，用于构建用户界面和单页应用程序。Nginx是一个高性能的HTTP和反向代理服务器，而Tomcat则是一个...
详解Vue项目编译后部署在非网站根目录的解决方案
08-27
官方给的nginx配置是根目录下的，需要修改try_files $uri $uri/ /index.html;为try_files $uri $uri/ /dist/index.html;，其中/dist根据实际部署的网站目录进行修改。 通过以上修改，可以实现Vue项目编译后部署在非...
vue-router+nginx 非根路径配置方法
08-27
"vue-router+nginx 非根路径配置方法" 作为一名IT行业大师，我将详细介绍vue-router+nginx 非根路径配置...vue-router+nginx 非根路径配置方法可以满足多项目在同一个域名下的需求，同时提供了灵活的路由配置方式。
Vue-cli打包后部署到子目录下的路径问题说明
11-19
默认情况下以当前域名为根目录向下访问。 举例，若需要部署到www.***.com/catalog1/catalog2/下，需要更改 1、config/index.js文件中，build下assetsPublicPath属性为’/catalog1/catalog2/’，如下： build: { assetsPublicPath: ‘/catalog1/catalog2/’, 默认情况下该值为’/’（该属性目测是webpack打包时的文件引用路径的基础路径）。 2、修改路由base属性为’/catalog1/catalog2/’,如下： export default new Router({
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
在Vue项目开发中，使用Vue CLI构建应用后，通常会通过`npm run build`命令生成一个用于部署的dist目录。然而，在将这个dist目录部署到Nginx服务器时，可能会遇到CSS样式不生效的问题。这个问题通常与静态资源的路径...
vue部署到nginx服务下，非根目录，刷新页面404怎么解决？
新技术革命
04-14 972
location / { proxy_pass http://xxxx; } location /category { root /home/tv; index index.html; try_files $uri $uri/ /index.ht...
vue打包后nginx非根目录部署（例如：http://127.0.0.1/backend）
qq_33040483的博客
07-26 481
这里使用的是history模式 1. 更改vue-router配置 mode: 'history', base: '/backend', 2.更改vue.config.js配置 publicPath: '/backend', 3.更改nginx配置 location ^~/backend { alias D:\phpstudy_pro\WWW; try_files $uri $uri/ @rewrites; } location @rewrit...
学习笔记六：在Nginx非根目录下配置同域名多个子项目（Vite2+Vue3）
YGいくこさん的博客
03-28 1622
近期把公司内部管理系统从Vue2升级到Vue3版本，部署时遇到非根目录配置问题，需要在同一个域名的不同目录下配置两个网站，借此做个记录。
解决Vue3+Vite3 打包部署到nginx后配置非根目录刷新页面报错空白
热门推荐
我不是程序员的博客
12-19 1万+
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
vue部署到nginx非根目录下面，vue cli3.0
海天酱油zz
03-09 4521
先贴nginx配置 #nginx作为服务器需要的配置 location /miniprogram { root D:/nginx/html/miniprogram; index index.html; try_files $uri $uri/ /index.html; } 这段配置就是简单的指向index首页和静态文件所在...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值