vue3中的多模式和环境变量

多模式：

模式是 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 选项参数为命令行覆写默认的模式。例如，如果你想要在构建命令中使用开发环境变量(在package.json中使用以下命令)：

//用webpack做打包的方式
"scripts": {
    
    
    "dev": "vue-cli-service serve --mode=development",
    "build": "vue-cli-service build --mode=production",
  },

//用vite做打包，cross-env是做跨操作系统用的
"scripts": {
    
    
    "dev": "cross-env vite --mode=development",
    "build": "cross-env vite build --mode=production",
    "release": "cross-env vite build --mode=release",
    "serve": "vite preview"
  },

当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV变量，它的值将取决于模式，例如，在 production 模式下被设置为 “production”，在 test 模式下被设置为"test"，默认则是 "development"。

NODE_ENV

如果在环境中有默认的 NODE_ENV，你应该移除它或在运行 vue-cli-service 命令的时候明确地设置 NODE_ENV。

环境变量

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

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

在这里插入图片描述

项目中常用的几种，带local的文件优先级高于不带的，遇到相同变量名会覆盖掉不带local文件中相同的变量。

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

# 开发环境
NODE_ENV = development
# publicPath
VUE_PUBLIC_PATH = ./

警告

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

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

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

扫描二维码关注公众号，回复： 14858941 查看本文章

请注意，使用vite的时候要使用NODE_ENV，BASE_URL 和以 VITE_开头

使用环境变量方式

webpack中直接使用process.env.xxx
如process.env.NODE_ENV直接拿到当前的环境

常用的场景

//根据不同的环境来设置对应的变量
let BASE_URL = ''
let BASE_NAME = ''
switch (process.env.NODE_ENV) {
    
    
  case 'development':
    BASE_URL = 'http://coderwhy.org/dev'
    BASE_NAME = 'dev'
    break
  case 'production':
    BASE_URL = 'http://coderwhy.org/prod'
    BASE_NAME = 'prod'
    break
  default:
    BASE_URL = 'http://coderwhy.org/test'
    BASE_NAME = 'test'
    break
}

在vite中使用import.meta.env.xxx
如const baseUrl = import.meta.env.VITE_APP_SOURCE_URL;

//我们可以看下浏览器中打印的结果
const env = import.meta.env;
console.log(env);

在这里插入图片描述

环境文件加载优先级

为一个特定模式准备的环境文件 (例如 .env.production) 将会比一般的环境文件 (例如 .env) 拥有更高的优先级。
此外，Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。
.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务。

只在本地有效的变量

有的时候你可能有一些不应该提交到代码仓库中的变量，尤其是当你的项目托管在公共仓库时。这种情况下你应该使用一个 .env.local
文件取而代之。本地环境文件默认会被忽略，且出现在 .gitignore 中。
.local 也可以加在指定模式的环境文件上，比如 .env.development.local 将会在 development
模式下被载入，且被 git 忽略。

改了环境变量不要忘记重启项目

**
详细配置

vue3中的多模式和环境变量

多模式：

环境变量

环境文件加载优先级

只在本地有效的变量

猜你喜欢