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, // 这个就是上面的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博客

相关推荐
一路上__有你1 分钟前
闲来无事,写一篇文章吧!
前端·javascript·vue.js
keep_di2 分钟前
05-vue3+ts中axios的封装
前端·vue.js·ajax·typescript·前端框架·axios
JiKun18 分钟前
ECMA 2024(ES15) 新特性
前端·javascript
百锦再25 分钟前
从 .NET 到 Java 的转型指南:详细学习路线与实践建议
android·java·前端·数据库·学习·.net·数据库架构
i小杨37 分钟前
前端埋点(打点)方案
前端·状态模式
前端加油站1 小时前
时间转换那些事
前端·javascript
风清云淡_A1 小时前
【VUECLI】node.js打造自己的前端cli脚手架工具
前端·node.js
YuspTLstar1 小时前
一文掌握Redux-toolkit核心原理
前端·react.js
云枫晖1 小时前
手写Promise-静态方法all和allSettled
前端·javascript
weixin_456904271 小时前
前端开发时npm install报错解决方案
前端·npm·node.js