Vue打包丢到服务器-请求后台的接口路径错误

问题描述

项目打包部署到测试服务器上之后，axios访问路径一直不对，本地用的proxyTable代理解决的跨域问题。
请求路径应该是“http://xxx.xxx.xx.xx:8080/zlhj_interface/rateScreen/queryProAndCity”，但是部署到测试服务器上之后多出下图框选的路径“zlhj/app/carAuth”（dist文件放在这个carAuth文件夹下）。

报错截图

解决方案

步骤一：在config/prod.env.js中，新增：

// Test server domain name
API_HOST:'"http://xxx.xxx.xx.xx:8080"'

// An highlighted block
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST:'"http://xxx.xxx.xx.xx:8080"'
}

步骤二：在config/dev.env.js中，新增：

API_HOST:'"/api/"'

// An highlighted block
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST:'"/api/"'
})

步骤三：在main.js中（我封装了axios在request.js）设置：

request.defaults.baseURL = process.env.API_HOST;

// An highlighted block
/** global config */
request.defaults.baseURL = process.env.API_HOST;
request.defaults.headers.post['Content-Type'] = 'application/json';
request.defaults.timeout = 30000;
request.defaults.withCredentials = true;//Send cross-domain request credentials

注意点：

设置API_HOST的时候，必须加上单引号‘ ’跟双引号“ ”

// An highlighted block
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_HOST:'"http://xxx.xxx.xx.xx:8080"'
}