编程知识 cdmana.com

vue-cli 多环境构建打包

多环境简介

官方文档:https://cli.vuejs.org/zh/guide/mode-and-env.html

环境文件的命名规则:

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入,但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入,但会被 git 忽略

文件中以"键=值"的形式配置环境变量,如果不同文件存在同名的环境变量,保留高优先级文件中的值。优先级为:.env.[mode].local > .env.[mode] > .env.local > .env

请注意,只有 NODE_ENVBASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。

嵌入的意思就是说,在客户端代码中可以访问到这些环境变量。比如可以这样获取变量:console.log(process.env.VUE_APP_SECRET)

构建时指定环境

环境机制是vue-cli实现的,事实上,我们需要指定vue-cli的mode参数才能实现不同环境的构建,命令格式为:vue-cli-service build --mode {mode}

回想一下,我们构建时一直用的是npm run build。其实这行命令本质就是执行vue-cli-service build,它两的对应关系维护在 package.json。打开 package.json,你会发现这段配置:

  ...
  "scripts": {
    
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  ...

当我们运行npm run build,node就会去找 scripts对象中的 build属性的值,也就是vue-cli-service build来执行。
抽象点表示就是:npm run { key} --> scripts[key]

这样的话,要想指定 vue-cli的mode参数,那我们就干脆直接在scripts多加几条命令得了。如下:

  ...
  "scripts": {
    
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build:prod1": "vue-cli-service build --mode prod1",
    "build:prod2": "vue-cli-service build --mode prod2"
  },
  ...

当执行 npm run build:prod1,实际会执行 vue-cli-service build --mode prod1,这个命令指定了构建时使用 prod1 环境。相应的就会读取 .env.prod1 环境配置。

总结

  1. 维护不同环境的环境配置。命令格式:.env.[mode]
  2. 在package.json的scripts属性增加指定了环境的配置。格式:vue-cli-service build --mode [mode]
  3. 使用scripts的key值进行构建。格式:npm run [key]

版权声明
本文为[markix]所创,转载请带上原文链接,感谢
https://markix.blog.csdn.net/article/details/119921222

Scroll to Top