vue项目部署在域名的子目录下应该如何配置

需求：实现本地调试直接使用根目录，build发布后支持部署在http://www.xxx.com/myapp子目录下
解决：vue-cli脚手架搭建的项目，都是默认以根目录形式配置（http://www.xxx.com） ，想要部署在子目录下（http://www.xxx.com/myapp ）需要修改相应的配置才能实现。

1. .env.production文件

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = 'http://www.xxx.com'

#前端访问是否携带项目名称
VUE_APP_PACKAGE = '/myapp/'

2. vue.config.js文件

module.exports = {
//部署应用包时的基本 URL
publicPath: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PACKAGE : '/',
}

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

const router = new Router({
  mode: "history",
  base: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_PACKAGE : '/',
  ...
});

4. nginx配置

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

后端配置例子：https://router.vuejs.org/zh/guide/essentials/history-mode.html