npm scripts 配置环境变量通过 process.env.npm_package_repository_type

在执行 npm script 的时候还可以访问到一些特殊的环境变量

注意：只能在 webpack 配置文件 vue.coinfig.js 才能获取到变量

{
"name": "Demo",
"version": "1.0.0",
"description": "a simple Demo",
"repository": {
    "type": "git",
     "url": "www.baidu.com"
  }
}

通过 process.env.npm_package_name 可以获取到 package.json 中 name 的值 Demo；通过 process.env.npm_package_repository_type 可以拿到值 git。

注意：可以在所有页面获取到变量

需求：通过 npm scripts 配置，在不同的模式下获取不同的全局变量。

例如：

在终端输入 npm run huildH5 , 打包 h5的 production 环境，VUE_APP_BASE_MODULE = 'H5';可以在代码进行逻辑判断。
在终端输入 npm run huildApp , 打包 App的 production 环境，VUE_APP_BASE_MODULE = 'APP';可以在代码进行逻辑判断。

实现：

新增一个环境变量文件：.env.productionApp

.env.productionApp 配置信息

.env.production

  "scripts": {
    "build": "vue-cli-service build",
    "buildApp": "vue-cli-service build --mode productionApp",
  },

使用 npm run buildApp 就可以在客户端侧代码中使用 App 环境变量 VUE_APP_BASE_MODULE = 'APP'

使用 npm run build 就可以在客户端侧代码中使用 H5 环境变量 VUE_APP_BASE_MODULE = 'H5'

更加深入可参考：Vue-cli 模式

npm scripts 配置环境变量