项目需求:

同一个域名 根据 url 前缀访问不通的vue项目。
如: www.test.com/adminwww.test.com/customer 分别进入到两个vue项目

修改vue项目,增加前缀

项目使用 vue cli 版本为 @vue/cli 4.5.11
路由使用的是 history 模式
修改 vue.config.js 修改 publicPath https://cli.vuejs.org/zh/config/#publicpath

module.exports = {
  publicPath: process.env.VUE_APP_BASE_URL // 这里 VUE_APP_BASE_URL 我放到了环境变量里 值为 '/admin/`
}

修改完 publicPath 环境变量 process.env.BASE_URL 也会随之变化
https://router.vuejs.org/zh/api/#base
这样所有路由就会自动增加 /admin 前缀

vue router change base url

nginx 配置

server {
  listen 80;
  server_name iot.commchina.net;

  location /admin {
    try_files $uri $uri/ /index.html = 404;
    alias /home/deploy/apps/admin_vue/current/dist/;
  }

  location /customer {
    try_files $uri $uri/ /index.html = 404;
    alias /home/deploy/apps/customer_vue/current/dist/;
  }
}

vue 打包的 dist 目录并没有 /admin 目录,所以这里用 alias 而不是 root

1条评论 顺序楼层
请先登录再回复