前端Vue CLI 环境变量 — env

一定要先看官方文档，不要上来就开整，很多配置内部是有约定的，所以别乱来。文档说的很清楚，三种模式 development、 test、 production，分别代表开发、测试、生产。

可以在命令行这样设置：

"scripts": {
  "serve": "vue-cli-service serve",
  "build:beta": "vue-cli-service build --mode development",
  "build:release": "vue-cli-service build --mode production",
  "lint": "vue-cli-service lint"
}

例如下图构建了build:beta和build:release两个新环境。然后执行npm run build:beta就可以构建build:beta模式下的工程了。执行npm run build:release就可以构建build:release模式下的工程了。

文件名对应 mode 配置，当你运行指令 npm run build:beta 时，便可以在页面内部获取 .env.development 内设置的变量，如下所示：

获取和使用：

<template>
  <img alt="Vue logo" src="./assets/logo.png">
</template>

<script>
export default {
  name: 'App',
  setup() {
    console.log('env', process.env) // 打印环境变量
  }
}
</script>

这里要特别注意一点，Vue CLI 在打包生产环境的时候，一定要使用 production 模式，因为内部 webpack 构建代码的时候，会根据 NODE_ENV 来选择不同的构建脚本，生产环境肯定会做很多优化，所以切记。

有了环境变量之后，在项目内一些测试环境、生产环境需要的资源，便可以动态配置。

如果本文还没看明白，可参考这篇文章：
https://blog.csdn.net/u011050541/article/details/107136391/