Vue项目部署在二级目录下该如何配置

问题描述:
近期使用Vue开发了一个应用，需要挂载在某个域名的子目录下。例如：http://www.domain.com/app/myapp 。而默认vue-cli脚手架搭建的项目，都是默认以根目录形式配置（http://www.domain.com） ，需要修改相应的配置才能实现此功能。下面介绍一下如何实现子目录形式发布所需要的相关配置。

环境描述
本项目使用Vue 2.5.17，vue-router 3.0.1，vue-cli 3.1.1。由于vue-cli 3.X与之前版本存在较大差异，本文描述的配置可能不适用于2.X版本，没有做过验证，特此声明。

具体配置
注意：由于调试和实际发布不同，调试直接使用本地根目录，发布才需要设置子目录。

项目根目录配置
在vue.config.js中增加如下配置，通过环境信息识别是调试还是发布。

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/app/myapp/'
    : '/'，
  ...
}

路由增加根目录
在vue-router配置中增加base属性，声明路由根目录

export default new Router({
  base: process.env.BASE_URL,
  ...
})

nginx配置
由于路由使用了HTML5 History模式，所以需要进行特殊的配置
如果是直接部署在根目录，配置如下

location / {
  try_files $uri $uri/ /index.html;
}

子目录部署，配置如下

location /app/myapp {
  try_files $uri $uri/ /app/myapp/index.html;
}

通过上述配置后，就可以实现本地调试直接使用根目录，build发布后支持部署在/app/myapp子目录下。

作者：belllee
链接：https://www.jianshu.com/p/5b66847694d0
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。