vue cli3.x development模式打包app.js包太大

一、背景：升级老项目遇到的问题1.项目目录2.package.json3. env配置.env.development 配置NODE_ENV=developmentVUE_APP_BASE_API=开发VUE_APP_BUCKET=开发.env.production配置NODE_ENV=productionVUE_APP_BASE_API=生产VUE_APP_BUCKET...

xiaofei0627

14230人浏览 · 2018-10-31 16:39:51

xiaofei0627 · 2018-10-31 16:39:51 发布

一、背景：升级老项目遇到的问题
1.项目目录
在这里插入图片描述
2.package.json

3. env配置
.env.development 配置

NODE_ENV=development
VUE_APP_BASE_API=开发
VUE_APP_BUCKET=开发

.env.production配置

NODE_ENV=production
VUE_APP_BASE_API=生产
VUE_APP_BUCKET=生产

4.执行npm run build:dev
打包后，发现app.js 有十几兆，上传到服务器，根本无法打开（时间太久）
在这里插入图片描述

二、解决方式（暂时能解决的，有可能还有更好的办法）
1.在根目录下新建.env.dev文件
配置如下（内容和.env.development文件一致，NODE_ENV改为production）

NODE_ENV=production
VUE_APP_BASE_API=开发
VUE_APP_BUCKET=开发

2.修改package.json
在这里插入图片描述

3.执行npm run build:dev
发现分包，压缩都可以了
在这里插入图片描述

4.原理其实是借用production模式来载入开发的环境变量

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^