Vue前端打包详细流程

您所在的位置：网站首页 › 打包软件是什么东西 › Vue前端打包详细流程

Vue前端打包详细流程

2024-07-04 20:19| 来源: 网络整理| 查看: 265

前端打包添加打包命令运行打包代码打包指定不同的环境变量打包自定义文件移除三方包gzip压缩打包部署模式

添加打包命令

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" 运行打包代码

不可直接双击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 dist 在这里插入图片描述

打包指定不同的环境变量

添加环境变量 ① 开发：在根目录下创建 .env.dev 文件（与package.json中mode对应） ② 线上：在根目录下创建 .env.prod 文件（与package.json中mode对应）在需要动态指定变量的位置使用process.env.NODE_ENV等在这里插入图片描述

在这里插入图片描述

// .env.dev ##开发环境 NODE_ENV=development ##变量以VUE_APP_开头 VUE_APP_URL=http://www.dev.com // .env.prod ##生产环境 NODE_ENV=production VUE_APP_URL=http://www.prod.com 打包自定义文件

vuecli是基于webpack vuecli零配置不需要零配置可以指定vue.config.js

npm run build:prod 少了注释、空行、压缩等

移除三方包

代码细分 ①三方包：vue elementui axios等 ②开发代码：自己写的移出三方包：使用三方提供cdn（免费、收费）步骤： ①找到三方包cdn资源，添加到public/index.html ②把之前import导入的删除 ③在vue.config.js配置排除三方包

module.exports = { // 打开文件访问的相对路径独立项目通过项目根目录访问 publicPath: './', // 开发时需要线上不需要 map-->提供代码映射方便调试代码 productionSourceMap: process.env.NODE_ENV == 'development' ? true: false, // 配置webpack configureWebpack: config =>{ // config---vuecli默认配置 Object.assign(config, { // 排除依赖包 externals: { vue: 'Vue' } }) }, } gzip压缩

下载 npm i -D compression-webpack-plugin

打包发生错误： ERROR TypeError: Cannot read property ‘tapPromise’ of undefined TypeError: Cannot read property ‘tapPromise’ of undefined 在这里插入图片描述错误原因: 脚手架配置gzip打包不支持这个版本解决: 使用npm install [email protected] --save-dev 在vue.config.js配置

打包会生成gz结尾的文件在这里插入图片描述

let CompressionWebpackPlugin = require('compression-webpack-plugin') configureWebpack: config =>{ let plugins = [ new CompressionWebpackPlugin({ // 压缩方式 algorithm: 'gzip', // 匹配压缩文件 test: /\.js$|\.css$/, // 对于大于10k压缩 threshold: 10240 }) ] if(process.env.NODE_ENV == 'production') { config.mode = "production" config.plugins = [...config.plugins, ...plugins] } else { config.mode = 'development' } },

浏览器查看请求头：Accept-Encoding: gzip, deflate, br 响应头：Content-Encoding: gzip 在这里插入图片描述

打包部署模式

hash：打包后dist直接在http容器中运行线上一致

history：打包后脚手架刷新不会404 线上会404 解决方案：需要前端代码与后端一起部署由后端负责跳转前端

【本文地址】

Vue前端打包详细流程

Vue前端打包详细流程

今日新闻

推荐新闻