非域名根目录下如何部署Vue项目

场景：节约域名资源，在一个域名下部署多个前后端项目，由于域名根目录只能匹配一个项目，多出来的项目则需要通过添加一层路径转发访问。例如域名为vue.uat.com, 如果需访问第二个项目(vue-app)，则可以通过http://vue.uat.com/vue-app进行访问

1. 修改vue.config.js配置文件

module.exports = {
  publicPath: './'
},

2. 修改路由配置

vue-router中有一个base属性

base属性默认值为 '/'，如果需要部署在域名下的 /vue-app下，则base就设为vue-app

如果不希望开发环境也添加base属性的话，可以通过vue项目的环境变量进行判断

修改router/index.js代码

const base = process.env.NODE_ENV === 'production' ? 'vue-app' : ''

const router = new Router({
  routes,
  base,   // 项目路径配置
  mode: 'history'
})

3. 存在问题

例如直接访问http://vue.uat.com/vue-app无法进行路由的重定向，必须填写完整地址才可以访问。暂时未能确定是什么原因