Vue history模式路由 部署到二级目录 配置

1、nginx配置

#https://xxxx.com/cms -> C:/static-server/cms
location /cms {
    root C:/static-server; # 项目部署资源所在磁盘目录
    index  index.html;
    try_files $uri $uri/ /cms/index.html; #history模式路由需增加这一行配置
}

2、vue2项目配置

示例：部署到二级目录/cms。

.env.production

增加一个环境变量VUE_APP_BASE_URL，将环境变量VUE_APP_BASE_URL值设为 '/cms' 。

# just a flag
ENV = 'production'

# 网站部署目录
VUE_APP_BASE_URL = '/cms' # 设置为二级目录路径

vue.config.js

修改publicPath（打包后公共资源文件访问路径）。

module.exports = {
  ...
  publicPath: process.env.VUE_APP_BASE_URL, // 修改为二级目录路径
  ...
}

src\router\index.js

修改路由相关配置。

new VueRouter({
  mode: 'history', // router路由模式设置为history
  base: process.env.VUE_APP_BASE_URL, // 修改为二级目录路径
  ...
})

到此已完成配置。

3、可按需修改

3.1 改为hash模式路由，将router mode配置注释掉。

src\router\index.js

new VueRouter({
  // mode: 'history', // router路由模式设置为history
  base: process.env.VUE_APP_BASE_URL, // 修改为二级目录路径
  ...
})

3.2 修改网站目录，对应修改VUE_APP_BASE_URL。

# just a flag
ENV = 'production'

# 网站部署目录
VUE_APP_BASE_URL = '/' # 默认值