我们在开发VUE的过程中经常要用到环境变量，直接在根目录下新建对应环境的配置文件。

定义配置文件

然后再package.json中最对应的配置

配置文件啊后缀要跟 --mode 后面保持一致
定义的内容必须要VITE开头,如下

VITE_SERVER_URL=http://localhost:8070/
VITE_TITLE=easyblog

使用配置文件

在vite.config.js中使用

如图：

import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    server: {
      hmr: true,
      port: 3002,
      proxy: {
        '/api': {
          target: env.VITE_SERVER_URL,
          changeOrigin: true,
          pathRewrite: {
            "^api": "/api"
          }
        }
      }
    }
  }
})

引入 loadEnv
通过

const env = loadEnv(mode, process.cwd());

获取env对象，就可以直接调用了

在vue中使用

在vue中使用就简单了,直接通过 import.meta.env 就可以获取到想要的属性

const title = ref(import.meta.env.VITE_TITLE);