在nginx中配置vue项目的时候,类似于location /XXX {}
这种,会出现很多问题,比如404,403,刷新404等等情况,还是没有搞懂什么原因,不过却找到了解决方法,记录一下,防止忘记!
-
修改vue项目中
vue.config.js
文件中的publicPath
在生产环境中的子路径。publicPath: process.env.NODE_ENV === "production" ? "/子路径" : "/",
-
在vue项目中
router
目录下index.js
文件中export default new Router{}
的节点中添加或者修改base: 子路径
属性。export default new Router({ mode: 'history', // 去掉url中的# base: process.env.BASE_URL, //获取 publicPath的值,这里获取根据环境不同获取不同的publicPath ...其他配置 })
-
如上配置,就会在生产环境中访问项目时,在域名后面会自动加上
/子路径
,例如:http://XXXX.com/子路径/index
-
在
nginx
中配置location /子路径 { alias E:/workspace/theFrontEnd/a/dist; #autoindex on; try_files $uri $uri/ /子路径/index.html; index index.html index.htm; }
需要注意的点:[
location /子路径{}
] 中的子路径必须要与vue项目中的子路径相同,并且在[try_file $uri $uri/ /子路径/index.html;
]中的子路径也必须要与vue项目中的子路径相同。还有就是 [alias E:/workspace/theFrontEnd/a/dist;
]这行要使用alias
不要使用root
。
- 5.反思
nginx学的不是太好,是不是 nginx通过 location代理 vue项目的打包路径,如果location的路径为 / 还好,会直接访问vue打包路径中的文件,如果 location 的路径不是 / 而是 /XXX,那么通过nginx访问vue项目时,就会在路径上添加 /XXX 这个子路径,所以就404了。所以要在vue项目中添加子路径,保证vue项目中的子路径跟nginx中location路径保持一致!