nginx部署vue项目路径添加前缀

背景：近日客户提出希望在部署后的路径上添加一个项目前缀dist,原来访问地址是http://192.168.11.186:8888，现希望改成http://192.168.11.186:8888/dist才能正常访问

查阅诸多资料，从nginx部署多个前端项目中找到灵感

 server {
        listen       8081;
        server_name  localhost;

        location / {  #不修改此处，确保用户直接输入ip+端口无法访问到系统
            root   html;
            index  index.html index.htm;
        }
        location /dist {#添加前缀,但html中存放vue的目录名尽量也要改成相同名字
           alias  html/dist;
           index  index.html index.htm;
           try_files  $uri  $uri/   /index.html;
        }
}

改好配置后，发现页面一片空白，审查元素，发现资源文件都是404，如下图：

原因是vue打包后的资源文件默认是绝对路径，只有配置在根目录才有效。修改vue打包配置，找到vue.config.js,修改publicPath:'/'   为    ' ./  ' ，修改为相对路径

重新打包，重启nginx,启动成功

关于nginx配置项目与安装请参考文章：https://blog.csdn.net/sinat_34626741/article/details/115519348