Vue前端打包的详细流程
1、添加打包命令
package.json中添加配置
npm run build 发布到线上的代码 不便于调试
命令：
①npm run build:dev 开发调式环境
②npm run build:prod 线上调试环境
"build:dev": "vue-cli-service build --mode dev",
"build:prod": "vue-cli-service build --mode prod"
2、运⾏打包代码
不可直接双击dist/index.html
需要放在http容器中运⾏：serve tomcat nginx iis
本次使⽤serve
下载serve： npm i -g serve
报错：
Error: EPERM: operation not permitted, mkdir ‘C:\Program Files\nodejs\node global\node_modules.staging'解决： ⽤户—>个⼈⽤户—>删除.npmrc⽂件
启动打包后的⽬录： serve distnginx部署前端项目
3、打包指定不同的环境变量
添加环境变量：
① 开发：在根⽬录下创建 .env.dev ⽂件（与package.json中mode对应）
② 线上：在根⽬录下创建 .env.prod ⽂件（与package.json中mode对应）
在需要动态指定变量的位置使⽤v.NODE_ENV等
4、打包⾃定义⽂件
vuecli是基于webpack
vuecli零配置
不需要零配置可以指定fig.js
npm run build:prod 少了注释、空⾏、压缩等
4.1 移除三⽅包
代码细分：
①三⽅包：vue elementui axios等
②开发代码：⾃⼰写的
移出三⽅包： 使⽤三⽅提供cdn（免费、收费）
步骤：
①到三⽅包cdn资源，添加到public/index.html
②把之前import导⼊的删除
③在fig.js配置排除三⽅包
// 打开⽂件访问的相对路径 独⽴项⽬ 通过项⽬根⽬录访问
publicPath: './',
// 开发时需要 线上不需要 map-->提供代码映射 ⽅便调试代码
productionSourceMap: v.NODE_ENV == 'development' ? true: false,  // 配置webpack
configureWebpack: config =>{
// config---vuecli默认配置
Object.assign(config,  {
/
/ 排除依赖包
externals: {
vue: 'Vue'
}
})
},
}
4.2 gzip压缩
下载 npm i -D compression-webpack-plugin
5、打包发⽣错误：
ERROR TypeError: Cannot read property ‘tapPromise' of undefined TypeError: Cannot read property ‘tapPromise' of undefined
错误原因: 脚⼿架配置gzip打包不⽀持这个版本
解决: 使⽤npm install compression-webpack-plugin@6.1.1 --save-dev
在fig.js配置
打包会⽣成gz结尾的⽂件：
let CompressionWebpackPlugin = require('compression-webpack-plugin')
configureWebpack: config =>{
let plugins = [
new CompressionWebpackPlugin({
// 压缩⽅式
algorithm: 'gzip',
// 匹配压缩⽂件
test: /\.js$|\.css$/,
// 对于⼤于10k压缩
threshold: 10240
})
]
v.NODE_ENV == 'production') {
config.plugins = [...config.plugins, ...plugins]
} else {
}
},
浏览器查看：
请求头：Accept-Encoding: gzip, deflate, br
响应头：Content-Encoding: gzip
打包部署模式：
hash： 打包后dist直接在http容器中运⾏ 线上⼀致
history： 打包后脚⼿架刷新不会404 线上会404
解决⽅案：需要前端代码与后端⼀起部署 由后端负责跳转前端
到此这篇关于Vue前端打包的详细流程的⽂章就介绍到这了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。