vue-cli3.0 vue打包部署非根目录时，静态资源图片路径错误

2022-06-26 11:19:19

项目中需要把应用部署在子路径下，所以就需要修改vue配置和NGINX配置

以子路径为market为例.eg.http://localhost:8000/market/

1、第一步
修改vue.config.js文件
配置publicPath属性

publicPath:"/market/",// 默认 /  修改为  market

修改router.js
配置base属性

exportdefaultnewRouter({
  mode:'history',
  base: process.env.BASE_URL,// process.env.BASE_URL的值为配置的publicPath 的值
  routes:[...]})

2、第二步
修改NGINX配置

话不多说，直接上代码

...
location/{
   proxy_set_headerX-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_headerX-Real-IP $remote_addr;
   try_files $uri $uri/ @router;
   index index.html;
   root/opt/static/a/;}// 最重要的是添加下面这个配置// 其中注意添加 ^~/market/  前面两个符号，如果不添加，静态资源图片找不到路径，css里面设置的背景图片找不到路径，图片显示不出来
location^~/market/{
   proxy_set_headerX-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_headerX-Real-IP $remote_addr;
   try_files $uri $uri//market/index.html;// 必须这么写 /market/index.html   写成@router访问路由时，会报页面不存在
   index index.html;//  使用alias 代替  root
   alias/opt/static/b/;// b 是在static目录下创建的文件，和 a同级}

这样配置完，项目就可以添加子路径访问了

补充一些NGINX关于root 和 alias 的区别

root和alias是系统文件路径的设置。
root用来设置根目录，而alias用来重置当前文件的目录。

比如

location/img/{
    alias/var/www/image/;}
#若按照上述配置的话，则访问/img/目录里面的文件时，ningx会自动去/var/www/image/目录找文件

location/img/{
    root/var/www/image;}
#若按照这种配置的话，则访问/img/目录下的文件时，nginx会去/var/www/image/img/目录下找文件。

附上一个NGINX 的location 配置详解链接
转发https://blog.csdn.net/qq_33862644/article/details/79337348

语法规则： location [=|_|*|^~] /uri/ { … }

= 开头表示精确匹配
^~ 开头表示uri以某个常规字符串开头，理解为匹配
url路径即可。nginx不对url做编码，因此请求为/static/20%/aa，可以被规则^~ /static/ /aa匹配到（注意是空格）。以xx开头
~ 开头表示区分大小写的正则匹配以xx结尾
~* 开头表示不区分大小写的正则匹配以xx结尾
!_和!*分别为区分大小写不匹配及不区分大小写不匹配的正则
/ 通用匹配，任何请求都会匹配到。