vue的环境变量的配置

Blink46
125 阅读4分钟

在实际项目中，一般会有三种环境：开发环境，测试环境，生产环境，每个环境下可能都会有不一样的配置，地址等

那么如何去根据环境的不同配置对应的参数呢，总不能每使用一个不同的环境就手动改参数吧，太麻烦了也容易报错

模式

Vue Cli官网的模式写到：

一个 Vue CLI 项目有三个模式：

  • development 模式用于 vue-cli-service serve
  • test 模式用于 vue-cli-service test:unit
  • production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

你可以通过传递 --mode 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量：

vue-cli-service serve --mode development

就是说VUE有development，test，production三种模式，它们都有自己的默认配置参数，如果想要修改，那就在启动命令后面用 --mode 参数配置去覆盖它

  • 那么--mode是什么意思呢？后面为什么又要带一个development呢？那就要说说环境变量了

环境变量

Vue Cli官网的环境变量写到：

你可以在你的项目根目录中放置下列文件来指定环境变量：

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

就是在你项目的根目录下创建.env文件。

.env文件就是用来存放环境变量的文件

注意： .env.[mode]:只在指定的模式中被载入。

这个[mode]就是我们上面的 --mode development

所以它的意思就是 在运行 npm run serve的时候加载 .env.development文件，那么这个文件里面的环境变量就会被它加载

那么我们是不是就可以在不同的模式下，创建不同的 .env[mode]，在里面创建同名值不同的环境变量， 这样在不同的模式下就能使用不同的参数了

  • 那么 .env里面的环境变量怎么写呢？？

环境变量的写法

一个环境文件只包含环境变量的“键=值”对：

FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

警告

不要在你的应用程序中存储任何机密信息（例如私有 API 密钥）！

环境变量会随着构建打包嵌入到输出代码，意味着任何人都有机会能够看到它

  • 注意：.env里面的变量是写在一个 process对象下的，所以调用是 process.env.NODE_ENV 等

  • 但是

  • process是node环境下面的全局变量，那么我们如果想要在模块里面调用(比如想要在money.vue里面调用)，怎么办呢？？

    • 只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

如，在根目录创建了.env.production文件和.env.development文件

.env.production文件

API_URL = https://abc-pro.com
config_URL = https://production.kkk

.env.development文件

VUE_APP_API_URL = https://abc-dev.com
VUE_APP_config_URL = https://development.kkk

money.vue文件里输出

created() {
    console.log(process.env.VUE_APP_API_URL)
    console.log(process.env.VUE_APP_config_URL)
}
// 这样根据不同的运行环境得到不到的地址

process.env.NODE_ENV

  • NODE_ENV是process.env自带的属性，它会根据当前运行环境不同得到不同的值，比如开发环境它是：development,生产环境它是production

  • 所以它经常被当成判断当前运行环境的依据

  • 注：但个人感觉它的值并不怎么准确，我经常build的时候，在生产环境上面它还是development

  • 所以为了确保，我们自己给它设置值

跨平台的cross-env

在window平台下直接设置NODE_ENV =XXX是会报错的，cross-env 能够提供一个设置环境变量的scripts，这样我们就能够以unix方式设置环境变量，然后在windows上也能够兼容。

1.安装

npm install --save-dev cross-env

2.package.json文件

 "scripts": {
    "serve": "cross-env NODE_ENV=development vue-cli-service serve --mode development",
    "build": "cross-env NODE_ENV=production vue-cli-service build --mode production",
  },

  • 这样子我们在运行serve的时候

    • process.env.NODE_ENV的值就是 development
    • 然后执行.env.development文件，引入里面的全局变量

  • 运行build的时候

    • process.env.NODE_ENV的值就是 production
    • 然后执行.env.production文件，引入里面的全局变量
avatar
文章
阅读
粉丝