vue3 vite 多环境配置

在 Vue3 项目中，配置多环境是一个常见需求，通常包括开发环境、测试环境、预生产环境和生产环境等。通过多环境配置，可以根据不同的环境设置不同的接口地址、全局参数等。

1.创建环境配置文件

在项目根目录下创建不同的环境配置文件，例如  .env.dev（开发环境）、 .env.test（测试环境）、 .env.prod（生产环境）等,与src同级目录。文件内容如下：

# .env.dev

NODE_ENV='development'

VUE_APP_MODE='dev'

VUE_APP_API_HOST='本地开发api地址'

  

# .env.test

NODE_ENV='test'

VUE_APP_MODE='test'

VUE_APP_API_HOST='测试环境api地址'
 

# .env.prod

NODE_ENV='production'

VUE_APP_MODE='prod'

VUE_APP_API_HOST='生产环境api地址'

2.修改package.json

在 package.json 中修改 scripts 命令，分别对应不同的环境：

{

"scripts": {

"dev": "vue-cli-service serve --mode dev",

"test": "vue-cli-service serve --mode test",

"build:prod": "vue-cli-service build --mode prod"

}

}

运行指令如下：

npm run dev # 开发环境

npm run test # 测试环境

npm run build:prod # 生产环境打包

3.使用环境变量

在代码中，可以通过 import.meta.env 获取环境变量。例如，在 main.ts 中添加如下代码进行测试：

const env = import.meta.env;
console.log(env);

可以看出 import.mata.env 中默认包括五个内置环境变量：

MODE：应用的运行模式。由于我们是通过 yarn dev 启动服务，而 yarn dev 本质是执行 vite 启动，未显式执行 mode，故 MODE 的值为 development；

BASE_URL：部署应用时的基本 URL，在 vite 的配置文件 vite.config.ts 中的 base 属性指定；

PROD：是否是生产环境（即是否通过 vite build 构建）

DEV：是否是开发环境（即是否通过 vite 启动服务运行）

SSR：是否是服务端渲染模式。

# 配置 Vite 环境变量 vite.config.ts

环境变量通常可以从 process.env 获得。

注意 Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子，root 和 envDir 选项会影响加载行为。不过当你的确需要时，你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。

import { defineConfig, loadEnv } from 'vite'

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

4.总结

通过以上步骤，可以在 Vue3 项目中轻松实现多环境配置。根据不同的环境，设置不同的配置文件和启动命令，从而实现环境的灵活切换和管理