VueCli生产环境打包部署跨域失败踩坑

常见的跨域配置(/config/index.js):

proxyTable: {
      '/api': {
        target: 'http://192.168.2.139:8080/Mobile/Max', // 接口的域名
        // secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置，为true的话，请求的header将会设置为匹配目标服务器的规则（Access-Control-Allow-Origin）
        pathRewrite: {
          '^/api': '' //本身的接口地址没有 '/api' 这种通用前缀，所以要rewrite，如果本身有则去掉
          }
        }
    },

使用：‘/api/getData’

在开发调试时，使用axios进行数据交互时没问题。但打包部署到服务器上发现404，跨域报错了。研究发现还需要进行配置一下。

config文件夹还有2个文件dev.env.js和prod.env.js 分别是开发环境和生产环境配置文件，我们需要分别进行修改。

dev.env.js（开发环境）

const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

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

prod.env.js(生产环境）

module.exports = {
  NODE_ENV: '"production"',
  VUE_APP_BASE_API:'"http://192.168.xx:xxx"' //项目api地址
}

注意属性值里面要双引号，否则会报错（Unterminated string constant）。

配置好之后，程序会自动判断当前是开发还是生产环境，然后匹配VUE_APP_BASE_API。

VUE_APP_BASE_API可以通过process.env.VUE_APP_BASE_API来访问。

每次使用：process.env.VUE_APP_BASE_API+api地址 会很麻烦，这时我们可以设置axios的baseuURL。

一般我们会自己写个axios拦截器,生成一个axios对象，进行token等安全验证。再把这个对象引用到main,js，挂载在vue实例上。这里不做相关赘述，网上有很多。

生成axios对象设置baseURL:process.env.VUE_APP_BASE_API

这是我项目中axios拦截器部分代码

设置后，记得重新启动项目。我们调用数据就可以省去process.env.VUE_APP_BASE_API了 ，直接写接口地址方法名字符串。

比如：this. $axios.get(process.env.VUE_APP_BASE_API+‘/getData’ ) 变成 this. $axios.get(‘/getData’ )