How to utilize .env files in Vue development

Preface

We often see files starting with env in the directory of the vue project, declaring some variables in the file, which are some configuration variables that can be used in different environments.

# 页面标题
VITE_APP_TITLE = 管理系统

# 开发环境配置
VITE_APP_ENV = 'development'

# 管理系统/开发环境
VITE_APP_BASE_API = '/'
           

environment

The project runs not only when we type code, but also when it is officially used, etc., in these cases we distinguish between local environments, test environments, pre-production environments, production environments, and so on.

In these different environments, the code must run differently, and at this time, the env file is needed to control the changes and realize the differential configuration.

env naming

Usually the env file is named as follows:

• The .env file is loaded and merged for all environments (dev, test, build, etc.).
• .env.development 开发环境
• .env.production production environment

Among them, the .env, .env.development, and .env.production files are named as fixed formats and cannot be changed, otherwise the files cannot be read.

File reads

package.json vue, the required dependencies will be installed according to this file.

• scripts: Supported scripts
• dependencies: a list of dependencies in the production environment
• devDependencies: the list of dependencies of the development environment and test environment

In the package.json file, there is a scripts field to define script commands, and Vue will automatically load the corresponding environment configuration file according to the launch command. The property is used to run the npm run command, and the property name can be changed at will, while the value of the property is the actual running command, which is fixed.

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode development",
    "build:pro": "vue-cli-service build --mode production",
    "build:test": "vue-cli-service build --mode test",
  },
           

Configure environment variables

The file note starts with a # sign, and defines the variable as Attribute = Value.

# 页面标题
VITE_APP_TITLE = 管理系统

# 环境配置
VITE_APP_ENV = 'development'

# api 基础路径
VITE_APP_BASE_API = '/dev-api'
// 或
VUE_APP_BASE_API = '/dev-api'
           

use

Now that we know how to use a variable in the env file in different contexts, what do we do to use it in our project?

In a project, if I'm using Vite, in order to use a variable in my project, I need to have a VITE_ at the beginning, and a variable that doesn't start with a VITE_ can't be obtained.

// 在 vite 程序中获取
console.log(import.meta.env.VITE_APP_BASE_API); // /dev-api
// 在 vue2 项目中获取
console.log(process.env.VUE_APP_BASE_API); // /dev-api
           

In vite, if import.meta.env is not supported to get variables, we can use the loadEnv function exported by Vite to load the specified .env file

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 如果当前环境是开发环境，则 mode 为 development
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  const { VITE_APP_BASE_API } = env // VITE_APP_BASE_API = /dev-api
  return {
    // vite 配置
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})

           

summary

• By default, the .env file must be placed in the same directory as package.json in order to be loaded, unless the loading directory is changed in the configuration file.
• Different environments load different .env files.
• To use environment variables, there is a fixed requirement for the variable to start with VITE_ in a vite project and a VUE_APP in a vue2 project.

Original link: https://juejin.cn/post/7291449239498653696