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

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

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

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

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

修改router.js
配置base属性

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

2、第二步
修改NGINX配置

话不多说，直接上代码

...
location / {
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header X-Real-IP $remote_addr;
   try_files $uri $uri/ @router;
   index index.html;
   root /opt/static/a/;
}
// 最重要的是添加下面这个配置
// 其中注意添加 ^~/market/  前面两个符号，如果不添加，静态资源图片找不到路径，css里面设置的背景图片找不到路径，图片显示不出来
location ^~ /market/ {
   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   proxy_set_header X-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结尾

• !_和!*分别为区分大小写不匹配及不区分大小写不匹配 的正则

• / 通用匹配，任何请求都会匹配到。