vue-cli3路由histroy模式部署在非根路径

假设需要部署在 /root-dir 这个路径，而不是 / 这个路径。

路由配置：
router.js

export default new Router({
  mode: 'history',
  base: 'root-dir', // 需要配置此项来设置路由的基础路径，不然路由表只会按根路径来匹配
  routes: [
    {
      name: 'Root',
      path: '/',
      component:Root
    },
    {
      path: '*',
      redirect: { name: 'Root' }
    }
  ]
})

项目配置

vue.config.js

module.exports = {
  publicPath: '/root-dir/',		// 配置网站的根目录，不配置此项就无法加载各种资源，js，css等
  outputDir: 'dist/root-dir',	// 可以不配，配置后再build后会直接打包在‘dist/root-dir’文件下，直接拖到服务器覆盖就行
}

nginx 配置

如果你是 Linux 用户：

    location /root-dir {
        alias /var/www/html/root-dir;                 # 把 /root-dir 开头的请求解析到项目路径，项目文件夹不一定需要是 root-dir，同名只是为了管理
        try_files $uri $uri/ /root-dir/index.html;    # 解析方式。先直接解析地址，再把地址当做路径解析，都找不到就默认发送 /root-dir/index.html
    }

如果你是 windows 用户：

        location /root-dir {
            alias "C://Users/xxww/Desktop/project/build/root-dir";
            try_files $uri $uri/ /root-dir/index.html;
        }

上述代码设置了以 /root-dir 路径开头的访问，被重写（alias）到一个其他路径，并且尝试访问（try_files）该路径资源，或该路径的文件夹，如果都无法访问，则默认返回某个 HTML（/root-dir/index.html）文件。