Vue-cil3.x 使用axios进行跨域访问配置

最近开始创建一个新项目时，把vue的版本升级成了最新版，发现项目目录结构也发生了很大的变化!
网上找的关于axios的跨域配置都是2.x，无法对新版本使用

1571370645281.jpg

1571370578804.jpg

变化最明显的就是在3.x版本中没有了build、config 文件夹, 在对axios 进行跨域配置行也有不同

1.首先导入axios
axios 官方指导 http://www.axios-js.com/zh-cn/docs/vue-axios.html

1571377900985.jpg

2.在项目根目录创建vue.config.js 文件，在此文件夹进行跨域配置
vuecil3.x 官方指导 https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

module.exports = {
lintOnSave: false,
devServer: {
 host: 'localhost',
 port: 8888,
 proxy: {
   '/api': {
     target: 'http://v.juhe.cn/weather',//代理地址
     changeOrigin: true,// 是否允许跨域
     ws: true, // 支持socket 长连接 跨域
     pathRewrite: {
       '^/api': '/',
       pathRewrite: { '^/api': '/' }
     }
   }
 }
},
}

3.最后一步，非常重要就是在main.js中指定 axios 的baseUrl

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
Vue.config.productionTip = false
axios.defaults.baseURL = '/api'   //指定baseUrl 
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

这样配置跨域配置就完成了