配置vuecli3中的代理遇到的坑

vue-cli3/4代理

首先简单的说一下我所理解的代理，这个代理的主要功能就是避免跨域问题的产生，当然，这个问题的产生是通过前端的方式进行跨域问题避免的调试，在打包之后，代理问题依旧可能会出现，如果打包之后的前端和后端代码如果不在同一个服务器下，那么可能就需要通过nginx等的方式进行跨域的避免，相对而言，我还是比较讨厌跨域问题的。。。。
在vuecli中，提供了一个代理的模式，主要的思路就是在本地搭建一个虚拟的nodejs的服务，你的接口访问的是nodejs的虚拟服务器，之后在通过虚拟服务器进行访问实际的接口，这里是将nodejs当作了一个中间件，避免了跨域问题的产生。

基础配置来一波

首先，在vuecli3/4中，没有了cli2中的/config/index.js的文件，所以需要在src目录的同级别下创建一个 vue.fonfig.js的文件，进行对vue的配置，直接创建这个文件就可以，前提是文件名称一顶要对，否则无效，这个文件中的内容对vuecli的配置有较高的优先级，因此，这里配置的属性都会变成最终的属性，但是需要注意的是，在配置的过程中，这里可能有部分配置是区分开发环境和线上环境的，千万别因为这个浪费大量的时间。
一起看下配置代码

const path = require('path')
const webpack = require('webpack')

module.exports = {
	filenameHashing: false,
	lintOnSave: true,
	// 是否使用包含运行时编译器的Vue核心的构建
	runtimeCompiler: false,
	// 默认情况下 babel-loader 忽略其中的所有文件 node_modules
	transpileDependencies: [],
	// 生产环境 sourceMap
	productionSourceMap: true,
	// All options for webpack-dev-server are supported
	// https://webpack.js.org/configuration/dev-server/
	devServer: {
		open: false,
		host: '0.0.0.0',
		port: 8088,
		https: false,
		hotOnly: true,
		disableHostCheck: true,
		proxy: "http://www.baidu.com" 
		// proxy: {
		// 	'/api': {
		// 		target: 'http://www.baidu.com',
		// 		ws:true,
		// 		changeOrigin: true
		// 	}
		// }
	},
};

上面两种配置的方式，推荐使用详细的配置，这里因为方便测试用了简写
最重要的一步是，这个代码修改完毕之后，是需要进行vue项目重启的，否则不会生效

相关Axios

通常来说，经过上面的步骤你的项目就不会出现问题了，但是！！但是！！但是！！，依旧有小伙伴会在这里报跨域的问题，那么问题就来了，其实跨域启动的node服务器已经启动成功了，这里出现的跨域问题很有可能是因为你在Axios里面配置了baseURL，因为proxy会将你的接口请求转换成你绑定的target服务的域名，所以这里就不需要去配置axios的接口域名了，本人就是因为这个浪费了很多时间没有弄出来这个问题。

axios访问接口的代码

this.$axios({
			    method:"post",
			    url:"/api/login",
			    data:{
				    "username":"***",
				    "password":"***"
				}
			}).
			then((ok)=>{
			    console.log(ok)
			},(err)=>{
			    console.log(err)
			})

在这里，实际访问的接口是http://www.baidu.com/api/login

 			pathRewrite:{
                '^/api':''
            }

相信如过查找了部分资料的童鞋，针对这个应该不陌生了，这里我只是来讲解一下我个人的理解，这个东西主要的功能就是对这个域名下的接口进行分类，同时也是用/api代替了上面路径上的http://www.baidu.com/api这么长的一个字段，因此，同样可以增加“/index”等的接口分类，所以，就算各位童鞋不去配置这个属性，那么影响也不会很大，但是如果对自己编码比较严谨的童鞋，还是需要去看看这个属性，会让代码结构和条例更加的清晰。

说明

以上只是我个人的使用的理解和自己的操作流程，如果有不懂的或者错误的内容，欢迎留言，我将在看到的第一瞬间进行修改，避免发生惨绝人寰的惨案。