vue一键打不同环境的包

1.配置package.json

主要看的是 "build:all": "vue-cli-service build && vue-cli-service build --mode test && vue-cli-service build --mode development",

复制代码
  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "build:all": "vue-cli-service build && vue-cli-service build --mode test && vue-cli-service build --mode development",
    "build": "pkg src/server/admin_web_server.js -t node12-win-x64,node12-linux-x64 -o my-server",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  },

2.新增你需要的环境

.env.development

复制代码
# just a flag
ENV = 'development'

.env.production

复制代码
# just a flag
ENV = 'production'

.env.test

复制代码
# just a flag
ENV = 'test'

3.修改vue.config.js中的 outputDir

复制代码
module.exports = {
...
  publicPath: '/',
  outputDir: 'dist-'+process.env.ENV,
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
...
}

outputDir 是打包后输出的目录;也可按照其他方式命名,每个环境不一样即可

4.打包

终端执行:npm run build:all

搞定

相关推荐
灵感__idea3 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡4 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo4 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel4 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld4 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel4 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi5 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_456904276 小时前
C# 中的回调函数
java·前端·c#
kura_tsuki6 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构
yinuo6 小时前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端