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博客

相关推荐
阑梦清川9 小时前
docker入门教程--部署nginx和tomcat
nginx·docker·tomcat
拉不动的猪10 小时前
图文引用打包时的常见情景解析
前端·javascript·后端
浩男孩10 小时前
🍀继分页器组件后,封装了个抽屉组件
前端
Dolphin_海豚10 小时前
@vue/reactivity
前端·vue.js·面试
该用户已不存在10 小时前
程序员的噩梦,祖传代码该怎么下手?
前端·后端
namehu10 小时前
前端性能优化之:图片缩放 🚀
前端·性能优化·微信小程序
摸鱼的春哥10 小时前
【编程】是什么编程思想,让老板对小伙怒飙英文?Are you OK?
前端·javascript·后端
尘世中一位迷途小书童10 小时前
版本管理实战:Changeset 工作流完全指南(含中英文对照)
前端·面试·架构
尘世中一位迷途小书童10 小时前
VitePress 文档站点:打造专业级组件文档(含交互式示例)
前端·架构·前端框架
甜瓜看代码10 小时前
666
前端