操作流程
VUE项目的打包流程
我们在项目打包时执行以下代码:
npm run build
1、新建vue.config.js,设置静态资源路径为’./’,解决打包后默认路径的白屏问题
module.exports = {
publicPath: "./"
}
2、关闭生产环境下的SourceMap映射文件,包的大小减少80%
module.exports = {
productionSourceMap: false,
}
3、配置跨域
module.exports = {
devServer: {
open: false, // 自动启动浏览器
host: '0.0.0.0', // localhost
port: 6060, // 端口号
hotOnly: false, // 热更新
overlay: {
// 当出现编译器错误或警告时,在浏览器中显示全屏覆盖层
warnings: false,
errors: true
},
proxy: {
//配置跨域
'/api': {
target: 'https://www.test.com', // 接口的域名
// ws: true, // 是否启用websockets
changOrigin: true, // 开启代理,在本地创建一个虚拟服务端
pathRewrite: {
'^/api': '/'
}
}
}
}
}
4、配置 alias 别名
//加载path模块
const path = require('path