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

随心点儿2025-07-24 11:01

二级目录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, // 这个就是上面的publicPath
  routes: constantRoutes
})

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

复制代码

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

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