1, introduction,

A project may have multiple versions such as development version, live version, test version and so on. Different environments will have different request API interfaces, so it is very troublesome to change some basic configuration, basic path, server proxy and so on. Therefore, environment variables are used here. Manually changing the interface address is tedious and error-prone. So the need for environment variable configuration arises at the historic moment, we only need to do a simple configuration, the environment state switch to the code.

  • Development environment (development phase, local development version, usually with some debugging tools or additional accessibility)
  • Test environment (during the test phase, the pre-launch version, except for some bug fixes, will not be much different from the launch version)
  • Production environment (during the launch stage, the version officially released will be optimized and error reporting will be turned off)

2, the use of

[1] Create the. Env file

  • Create it directly in the root directory.envFile with suffix
  • .envIf no other environment variables are set, the contents of this file will be loaded. For example, if all versions use the same interface address, they can be written in this file
  • .env.developmentEnvironment variables defined in the. Env file (such as NPM run dev) are automatically loaded.env.developmentFile)
  • .env.productionEnv is a production configuration file that overwrites environment variables defined in the. Env file

“.env.[name]” can be customized if the corresponding name is changed in package.json, but the default is not changed

# for example in config file "scripts": {"dev": "vite --mode dev", //- select. Env. dev as environment config file "build": "vite build", "serve": "vite preview" },Copy the code

[2] Get environment variables

Previous projects built using Vuecli could use process.env to get environment variables, but this is not allowed in Vite

Console. log(" environment variables =>",process.env) //errorCopy the code

In vite, you need to use import.meta.env to get env objects

//main.js import {createApp} from 'vue' import App from './ app.vue 'console.log(" environment variables =>", import.meta.env); createApp(App).mount('#app')Copy the code

According to the environment variables official documentation

Vite exposes environment variables on a special import.meta.env object. Here are some built-in variables that can be used in all cases:

  • Import.meta.env. MODE: {string} MODE in which the application runs.
  • Import.meta.env. BASE_URL: {string} Basic URL for application deployment. It is determined by the Base configuration item.
  • Import.meta.env. PROD: {Boolean} Whether the application is running in the production environment.
  • import.meta.env.DEV: {Boolean} Whether the application is running in a development environment (always withimport.meta.env.PRODOn the contrary).

[Note] The environment variable names represented in package.json have a higher priority than those configured in the. Env. [mode] file

VITE_Name=jack //package.json "dev": "vite --mode dev",Copy the code

[Note] Only variables prefixed with VITE_ are exposed to Vite-processed code. For example, import.meta.env.VITE_Name specifies the value of the corresponding variable. (Vite in vite environment, VUE in Vuecli environment)

[2] Description of the configuration file

Weight of environment variables

 .env.[mode].local > .env.[mode] > .env.local > .env 
Copy the code

[3] Problem with variable names in configuration files

The process.env we print in Vue’s front-end code may not be the same as the one we print in Vue’s.config.js configuration file.

vuecli

  • In the environment configuration file, use theVUE_APP_At the beginning,NODE_ENV 和 BASE_URLExcept for these two special variables)
  • This will pass through the project (client) codeprocess.envGet the variable (in the config vue.config.js (server) file)
  • This works by injecting process.env into client code from the contents of the webPack DefinePlugin built-in plug-in.
  • However, after encapsulation by CLI, it can only be injected into the environment configuration fileVUE_APP_The variable at the beginning, andNODE_ENV 和 BASE_URLExcept for these two special variables.

vite

  • To prevent accidental leakage of some environment variables to the client, the same is true in ViteVITE_Is prefixed to expose front-end code (client)
  • Unlike vuecli, it can be passed directly in vue.config.jsprocess.envGet environment variables directly. You cannot use them directly in Viteimport.meta.envIn order to get the
  • Here is the concept of a pattern, which needs to be configured according to some requirements of the project, see the official documentation

\