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

搞定

相关推荐
程序员爱钓鱼10 分钟前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel7 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着7 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友9 小时前
什么是API签名?
前端·后端·安全
会豪11 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子11 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶11 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子11 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_11 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark12 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js