nginx 上配置二级目录访问 vue 项目

文章讲述了如何通过Nginx配置实现Vue项目A和B的访问,包括修改B项目的公共资源路径以及处理刷新页面时的SyntaxError。重点介绍了vue.config.js中的publicPath设置和Nginx的try_files规则。

1. 实现效果

http://ip:port 访问 A 项目(vue 项目)

http://ip:port/c 访问 B 项目(vue 项目)

2. nginx 配置
location / {
  root   /usr/local/nginx/html/A/;
  index  index.html index.htm;
}

location /b {
  alias  /usr/local/nginx/html/B/;
  index  index.html index.htm;
}
3. B 项目公共路径修改

按照上面 2 个步骤配置好访问‘ http://ip:port/b ’是无法访问到 B 项目的静态资源的,需要配置 B 项目的公共资源路径:

vue 项目一般在 vue.config.js 中配置:

module.exports = {
  // 区分开发和打包分别配置,打包配置的值和nginx配置的保持一致
  publicPath: process.env.NODE_ENV == 'development' ? '/' : '/b',
}

4. 刷新页面报错 Uncaught

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值