vue-cli4x history模式 部署在子目录,以及服务器端的nginx配置

生产环境打包到子目录

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/test/' : '/',
  outputDir: 'dist/test',
  assetsDir: 'static',
}

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

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

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

location /test {
	root E:/xx/dist;
    index  index.html index.htm;  
    try_files $uri $uri/ /test/index.html;
}

你可能感兴趣的:(vue,nginx,vue,vue-cli3,vue-cli4,二级目录)