vue cli3 项目跨域问题处理

新建vue config.js配置文件

module.exports = {
	publicPath: './', //项目打包文件为路径为：./ 相对路径 , / 绝对路径
	outputDir: 'dist', //输出文件目录：在npm run build时，生成文件的目录名称
	assetsDir: "assets", //放置生成的静态资源 (js、css、img、fonts) 的目录
	productionSourceMap: false, //是否在构建生产包时生成 sourceMap 文件，false将提高构建速度

	/* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
	filenameHashing: false,
	lintOnSave: true, //代码保存时进行eslint检测

	/* webpack-dev-server 相关配置 */
	devServer: {
		open: true, //自动打开浏览器
		host: 'localhost', //服务器域名ip ,设置为0.0.0.0则所有的地址均能访问
		port: 8081, //端口号
		https: false, //是否开启HTTPS服务
		hotOnly: false,
		
		/* 使用代理解决跨域问题（跨域的常用方式：
				1、在前端解决跨域问题
				2、后端直接设置访问控制允许源Access-Control-Allow-Origin：* 代表允许全部域名跨域，也可单独设置指定域名跨域
				3、后端配置Nginx反向代理）
		*/
		proxy: {
			/* /api 开头的api接口全部会代理到 target 接口上 服务器需要把/api 删除*/
			'/api': {
				target: 'http://localhost:3000',//目标代理服务器地址
				changeOrigin: true, // 是否允许跨域
				/* 把api接口内的 /api 替换为空 */
				pathRewrite: {
					'^/api': ''
				}
			},
		},
	},
}