Vue开发环境跨域及开发和生产环境中使用axios的问题

开发环境跨域

在本地开发时，你的前端项目的端口号是8080，服务器的端口号是9080，那么是需要解决一个跨域问题的
1） 在config文件下打开index.js
2） 复制以下代码

proxyTable: {
	'/api': {
		  target: 'http://127.0.0.1:9080',
		  changeOrigin: true, //是否跨域
		  pathRewrite: {
		     '^/api': '/api'
		  }
	}
}

3） 粘贴的如下图这个位置

target为你服务器的地址，设置changeOrigin为true即可跨域
pathRewrite是路径重写，如你的api接口是localhost:9080/api/user/login，pathRewrite为’^api’：‘/api’，那么使用axios时候地址就可用写成api/user/login

开发环境生产环境api路径

1） 在config文件下打开dev.env.js

上图是dev.env.js的代码，添加一行代码

BASE_API: '"/api"'

这是在开发环境下的api路径
2） 在config文件下打开prod.env.js

添加一行代码，路径为生产环境下的api接口路径，就是项目npm run build之后的api路径

BASE_API: '"http://***.**.***.***:9080"'

3） 在main.js中添加一行代码

Vue.prototype.baseAPI = process.env.BASE_API

在Vue中挂载baseAPI变量，值为当前环境的api路径，baseAPI就可以通过this.baseAPI在组件中调用了
然后就可以通过如下代码使用axios了

this.$axios.get(this.baseAPI + '/article/getArticle')

这样之后就可以不用因为环境的不同而去手动修改api地址了。