Chicken Soup of the Day: Every moment you want to learn is the future you asking yourself for help
First of all, you can take a look at my article to learn about the environment variables of process.env.
For the vite project, after we initialize the project, print process.env in the browser, there is only the variable NODE_ENV, which is defined by the vite packaging tool itself, and we don't need to configure it manually.
Sometimes I want to define a new environment variable MY_ENV by myself, and require that it can be obtained using process.env.MY_ENV. This article mentions the configuration method of the webpack project:
Used in webpack.config.js, use plugins + new webpack.DefinePlugin to define [see the middle part of the picture below]
Similarly, we can also customize the vite project. The definition method is to use the define definition in vite.config.js. Please refer to the vite official document
// vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
// 省略其他配置
define: {
// 注意要用 JSON.stringify
'process.env.MY_ENV': JSON.stringify('this is my env'),
},
// 省略其他配置
})
So we can use process.env.MY_ENV in other files
Similarly, in the nuxt3 project, we can also use this function setting of vite. Remember that nuxt3 is packaged with vite!
// https://nuxt.com/docs/api/configuration/nuxt-config
// nuxt.config.ts
export default defineNuxtConfig({
// nuxt3 的配置文件中有一个vite的配置项
vite: {
define: {
'process.env.MY_ENV': JSON.stringify('this is my env'),
},
},
})
The environment variables mentioned above are generally a constant!
But it is not impossible if you want to set a variable, such as a variable bound to time, but pay attention to this variable, which needs to be declared in vite.config.ts or nuxt.config.ts , and cannot be imported from other files, because It will report an error, if you don’t believe me, try it.
For example, in the vite project, after declaring a variable in the configuration file vite.config.ts, and then using define to declare it as an environment variable, it becomes a constant for other files that reference the environment variable!
// vite.config.ts
import { defineConfig } from 'vite'
// 这是在配置文件中声明的变量
const version = `version- ${new Date().getTime()}`
// 注意不能这么写，不能在配置文件中导出常量，所以我们要利用环境变量“导出”
// export const version = `version- ${new Date().getTime()}`
export default defineConfig({
// 省略其他配置
define: {
// 从配置到环境变量之后，对于其他文件来说就是常量了
'process.env.VERSION': JSON.stringify(version),
},
// 省略其他配置
})
For the above-mentioned environment variable process.env.VERSION, it will change after each repackaging, because it is bound to the packaging time, so it can be used to determine whether the version is updated!
I still think that, except for the above-mentioned environment variables like process. It seems that there is not much difference between using const to declare a constant in a ts file, and then exporting [export]. The only difference is that variables declared using const need to be imported [import]. And the environment variables do not need to be imported!
If you want to use environment variables to distinguish the development environment from the production environment, then take a look at my article