Vue 服务器域名与接口不同域名上线后404

当Vue项目打包上线后
服务器域名与接口域名不同时 会报404
这是因为vue在开发环境下，会根据配置好的api自动添加基准路径
而在开发环境下，需要手动配置

在config/prod.env.js添加

module.exports = merge(prodEnv, {
  NODE_ENV: '"production"',
  API_ROOT: '"http://xxxx.xxxxxx.xxx"' // 基准路径
})

在api统一管理的文件内添加拦截器

///request拦截器
axios.interceptors.request.use(req => {
  // 上线环境 添加基准路径
  if (process.env.NODE_ENV == 'production') {
    req.url = process.env.API_ROOT + req.url
  }
  //向请求头添加token
  let token = {
    token: localStorage.getItem('token')
  }
  if (token) {
    req.params = {
      ...req.params,
      ...token
    }
  }
  return req;
}, error => {
  return Promise.reject(error);
})

收工