手把手教你——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子目录下。