vue-cli2和vue-cli3跨域配置文件的区别

[外链图片转存中…(img-TibWrThR-1689927036315)]

vue2的scripts执行通过webpack-dev-server启动项目；
{
	"scripts": {
		"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",
		"build": "node build/build.js"
	}
}
而vue3通过vue-cli-service启动项目
{
	"scripts": {
		"start": "vue-cli-service serve",
		"build:prod": "vue-cli-service build",
	}
}

vue-cli2的配置文件是放在config目录下；
而vue-cli3创建的时候并不会自动创建vue.config.js,因为这个是可选项，所以一般都是修改webpack的时候才会自己创建一个vue.config.js

• 跨域配置区别：

const VUE_APP_BASE_API = ‘/dev-api’

// webpack.config.js
module.exports = {
	dev: {
		proxyTable: {
			target: "",
			changeOrigin: true, // 则host会变成target的值
			pathRewrite: {
		          ['^' + VUE_APP_BASE_API]: ''
        	},
			logLevel:'debug' // 终端会输出跨域后真实地址
		}
	}
}

// vue.config.js
module.exports = {
	devServer: {
		open: true, // 设置其为 true 以打开你的默认浏览器
		proxy: {
			[VUE_APP_BASE_API]: {
				        pathRewrite: {
					          ['^' + VUE_APP_BASE_API]: ''
			        }
			}
		}
	}
}