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': ''
				}
			},
		},
	},
}