使用vite框架搭建Vue3项目如何配置多环境变量

1、简介

        为了适用不同的开发环境，在不同的环境中使用相同参数名但不是同一个参数值，因此灵活进行参数配置对项目开发中至关重要，下面介绍如何使用vite框架构建vue3项目配置多环境变量。

2、创建特定环境的变量文件

        在和src同级目录下创建文件名为：

注：自定义环境名需要和 package.json 文件中 --mode 后面的参数一致。

.env.自定义环境名

文件内容为：

        环境名称通过 ENV 指定（ENV是固定写法），定义的变量名以 VITE_ 开头。

ENV=development   # development是自定义环境名称，ENV变量名是固定写法
VITE_APP_SERVER=http://localhost:8000  # 定义的变量名以 VITE_ 开头

3、package.json文件指定使用特定环境中的变量

        以下示例中通过 --mode dev 指定使用 .env.dev 文件中的变量

"scripts": {
    "dev": "vite --mode dev --open",     # 通过添加 --mode dev 指定使用环境
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },

# axios 中配置全局默认访问路径
axios.defaults.baseURL = import.meta.env.VITE_APP_SERVER

4、如何引用.env.*文件中的变量

        使用 import.meta.env.VITE_APP_SERVER  获取到 .env.* 文件中的 VITE_APP_SERVER 变量。使用的示例如下：

# axios 中配置统一全局访问默认路径
axios.defaults.baseURL = import.meta.env.VITE_APP_SERVER