Vue.config.js配置
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>'
}
}
}