2020-12-07

vue-cli3 脚手架搭建完成后，项目目录中没有 vue.config.js 文件（和package.json同级)，需手动配置。

vue.config.js常用参数配置

通过设置devServer.proxy,设置本地代理解决web前端跨域问题

//vue.config.js
module.exports = {
	publicPath:'./',
	//Type：string
	//Default:'/'  
	//设置为相对路径'./'，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
	//这个值在开发环境下同样生效。如果你想把开发服务器架设在根路径，你可以用一个条件式
	//的值：（ publicPath:process.env.NODE_ENV ==='production' ? '/production-sub-path/' : '/'）
	outputDir:'dist',
	//Type:string
	//Default:'dist'  
	//当运行 vue-cli-service build 时生成的生产环境构建文件的目录。build输出目录
	assetsDir:'static',
	//Type:string
	//Default:''   
	//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
	indexPath:'index.html',
	//Type:string
	//Default:'index.html'
	//指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
	productionSourceMap: false;
	// 是否为生产环境构建生成 source map？这样打包的dist文件体积会很小（正式版）
    //为true带测试环境，提交会大很多
    
	devServer:{
		open: true, //是否自动弹出浏览器页面
        host: "localhost", 
        port: '8080', 
        https: false,   //是否使用https协议
        hotOnly: false, //是否开启热更新

		//跨域配置
		proxy:{
			'/api': {
            	target: '目标地址url',
            	ws: true,       //是否websocket代理
            	changeOrigin: true,
            	pathRewrite:{   //重写路径为/api  若后端api的请求地址为'/abc/efg'，
                	'^/api':''  //我们在发送请求时需将请求地址设置为'/api/abc/efg/'
            	}
            },
            '/foo': {
            	target: '<other_url>'
            }
        }
}

vue-cli详细配置-官方文档