vue3 vite 多环境配置

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

1.创建环境配置文件

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

ini 复制代码

# .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 命令，分别对应不同的环境：

json 复制代码

{

"scripts": {

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

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

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

}

}

运行指令如下：

bash 复制代码

npm run dev # 开发环境

npm run test # 测试环境

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

3.使用环境变量

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

ini 复制代码

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：是否是服务端渲染模式。

4.总结

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