背景:近日客户提出希望在部署后的路径上添加一个项目前缀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

Logo

前往低代码交流专区

更多推荐