vue2 webpack 部署二级目录、根目录nginx配置及打包配置调整

 二级目录abc  ，  打包vue.config.js中 的 publicPath需设置为  "/abc/"

server {listen       8303;server_name  localhost;location /abc{alias dist-abc-lc/;  # 项目打包后的目录  【# 20250722 二级目录部署的前端 】  对应代码 publicPath " /abc/ "try_files $uri $uri/ /abc/index.html;}location /prod-api{proxy_pass http://localhost:8003;}	error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

根目录 nginx配置，  打包vue.config.js中 的 publicPath需设置为  "/"

server {listen       8304;server_name  localhost;location /{add_header Cache-control "no-cache, no-store";root  dist-lc;  # 项目打包后的目录  【 20250722 跟目录部署的前端 】 对应代码 publicPath " / "try_files $uri $uri/ /index.html;}location /prod-api{proxy_pass http://localhost:8003;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

其它代码调整细节：

1、首先是路由配置  base: process.env.BASE_URL,

export default new Router({
//mode: 'history', // 去掉url中的#scrollBehavior: () => ({ y: 0 }),base: process.env.BASE_URL, // 这个就是上面的publicPathroutes: constantRoutes
})

2、index.html中引入的静态资源 ，需使用相对目录 ./  ，如下示例引入jquery：

<script src="./js/jquery-3.4.1.min.js" type="text/javascript"></script>

Nginx 配置中root和alias的区别分析_root alias 区别-CSDN博客