vue-cli模式和环境变量

快来打我* 2023-01-17 08:45 52阅读 0赞

### 默认情况下，一个 Vue CLI 项目有三个模式： ###

**development** 模式用于 vue-cli-service serve

**test** 模式用于 vue-cli-service test:unit

**production** 模式用于 vue-cli-service build 和 vue-cli-service test:e2e

![20210428101702384.png][]

### 环境文件： ###

当运行vue-cli-service 命令时，所有的环境变量都从对应的**环境文件**中载入。

环境文件：

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

![20210428103540626.png][]![20210428103602128.png][]

如果文件内部不包含** `NODE_ENV`** 变量，它的值将取决于模式，例如，在 `production` 模式下被设置为 `"production"`，在 `test` 模式下被设置为 `"test"`，默认则是 `"development"`。

### 使用环境变量： ###

只有以 `VUE_APP_` 开头的变量会被 `webpack.DefinePlugin` 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_SECRET)

**·** 除了 VUE\_ENV 会是 `"development"`、`"production"` 或 `"test"` 中的一个。

**·** BASE\_URL 会和 vue.config.js 中的 `publicPath` 选项相符，即你的应用会部署到的基础路径。

### 只在本地有效的变量： ###

有的时候，你可能有一些不应该提交到代码仓库的变量尤其是当你的项目托管在公共仓库时。这种情况下你应该使用一个 **`.env.local`** 或 **.env.xxx.local **文件取而代之。本地环境文件默认会被忽略，且出现在 `.gitignore` 中。

小例子：

package.json配置：

![20210428104006237.png][]

运行：**npm run dev** 时，会开启开发环境，页面中我们可以使用 **process.env.VUE\_ADD\_XXX** 来获取 **.env.development** 文件中的配置。

运行：**npm run build **时，会运行生产环境，打包项目， 如果页面中我们可以使用了 **process.env.VUE\_ADD\_XXX，** 那么它会去** .env.development** 文件中获取配置。

[20210428101702384.png]: /images/20221021/4a81fa5209ce4f84a08f37827e89f0ed.png
[20210428103540626.png]: https://img-blog.csdnimg.cn/20210428103540626.png
[20210428103602128.png]: /images/20221021/c3e05bb97565430bab17f5eb3304559e.png
[20210428104006237.png]: /images/20221021/9a3231e9e06a4768a6c23febe909ff9d.png