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

搞定

相关推荐
王王碎冰冰几秒前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice1 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼1 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin1 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6961 小时前
CSS-响应式布局
前端
三小河1 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法2 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku2 小时前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀6962 小时前
2025-35st-w-日常开发总结
前端