当我们在路由中配置如下代理，就可以解决跨域问题proxyTable:{'/goods/*':{target:'http://localhost:3000'},'/users/*':{target:'http://localhost:3000'}}，这种配置方式一定程度上解决了跨域问题，但是也会带来一些问题，比如由于我们的vue路由也是命名为goods，这时候就会产生冲突。如果项目中的接口很多，这里配置起来很麻烦，容易造成路由冲突。如果把所有的接口都标准化为一个入口，那么冲突就会在一定程度上得到解决。在上面的配置前面加上/api/proxyTable:{'/api/**':{target:'http://localhost:3000'},}，如果我们这样配置，使用的时候会变http请求，请求前面会加一个api，相对路由也会变，接口前面也会加api，这样会很麻烦，我们可以用下面的方式解决proxyTable:{'/api/**':{target:'http://localhost:3000',pathRewrite:{'^/api':'/'}},}，上面的代码是去掉我们的虚拟api接口.这时候我们真正去后台请求的时候，是不会加api前缀的。那么我们在前台进行http请求的时候，仍然会proxy必须以api为前缀，代码如下：logout(){axios.post('/api/users/logout').then(result=>{letres=result.data;this.nickName='';console.log(res);})},getGoods(){axios.post('/api/goods/list').then(result=>{letres=result.data;this.nickName='';console.log(res);})}我们可以使用axios的baseUrl直接默认为api，这样每次访问都会自动加上api前缀添加，所以我们不需要手动将它添加到每个将这个前缀写在接口上，在入口文件中配置如下：importAxiosfrom'axios'importVueAxiosfrom'vue-axios'Vue.use(VueAxios,Axios)Axios.defaults.baseURL='api'如果这个配置'api/'默认会读取本地域。如果上述配置不区分生产环境和开发环境，则在config文件夹下新建api.config.js配置文件。constisPro=Object.is(process.env.NODE_ENV,'production')module.exports={baseUrl:isPro?'http://www.vnshop.cn/api/':'api/'}然后在main.js中导入，保证动态匹配生产开发定义的前缀importapiConfigfrom'../config/api.config'importAxiosfrom'axios'importVueAxiosfrom'vue-axios'Vue.use(VueAxios,Axios)axios.defaults.baseURL=apiConfig.baseUrl经过以上配置后，在dom中可以通过这种方式轻松访问，并且不需要在任何组件中引入axios模块logout(){this.$http.post('/users/logout').then(result=>{letres=result.data;this.nickName='';console.log(res);})},getGoods(){this.$http.post('/goods/list').then(result=>{letres=result.data;this.nickName='';console.log(res);})}final代码在proxy中配置proxyTable:{'/api/**':{target:'http://localhost:3000',pathRewrite:{'^/api':'/'}},},在configapi.config.js配置在config文件夹中新建一个api.config.js配置文件constisPro=Object.is(process.env.NODE_ENV,'production')module.exports={baseUrl:isPro?'http://www.vnshop.cn/api/':'api/'}对生产开发配置不太了解的可以去dev-server.js看配置代码constwebpackConfig=（process.env.NODE_ENV==='测试'||process.env.NODE_ENV==='生产'）？要求（'./webpack.prod.conf'）：要求（'./webpack.dev.conf')configureimportapiConfigfrom'../config/api.config'importAxiosfrom'axios'importVueAxiosfrom'vue-axios'Vue.use(VueAxios,Axios)main.js入口文件中的axios.defaults.baseURL=apiConfig.baseUrl请求dom中api的姿势logout(){this.$http.post('/users/logout').then(result=>{letres=result.data;this.nickName='';console.log(res);})},getGoods(){this.$http.post('/goods/list').then(result=>{letres=result.data;this.nickName='';console.log(res);})}
