Vue项目在开发环境跨域和生成环境部署跨域问题解决

一.在dev环境下的跨域问题解决
1.项目使用的是axios请求网络,将baseUrl修改为/api (这里是使用webpack提供的代理功能将/api代理成目标接口host)

axios.defaults.baseURL = '/api';
2.进入config/index.js里,在dev下增加proxyTable配置,可以匹配到/api,将其代理成目标接口host

dev: {

// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
//////////////////////////////////////////////////////////////
proxyTable: {
'/api': {
target: 'http://192.168.1.111:8080/',//目标接口域名
changeOrigin: true,//是否跨域
pathRewrite: {
'^/api': ''//重写接口,后面可以使用重写的新路径，一般不做更改
}
}
}

}
  此时已经解决了dev下的跨域问题

3.进入package.json,在dev字段下增加 " --host 0.0.0.0 ",这样就可以真机通过ip地址访问项目,进行调试

"scripts": {
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
}

 

二、生产环境

（1）在config/dev.env.js下配置开发环境的API_ROOT

 

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

module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_ROOT: '"/api"' //这是新增的代码
})

 

（2）再config/prod.env.js下配置生产环境的API_ROOT

'use strict'
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"https://xxx/"' //这是新增的代码
}

（3）在需要调用的地方

 

export const evidence_url = process.env.API_ROOT + '/' + ''; 

//process.env.API_ROOT 根据不同的环境会返回给你不同的API_ROOT

 

（4）重启项目