vue中配置开发环境测试环境生产环境

2024-12-28 约 494 字预计阅读 1 分钟

https://bing.ee123.net/img/rand?artid=104770310

vue中配置开发环境、测试环境、生产环境

前言：开发过程、测试过程、生产过程使用的接口地址不能，还有执行的操作可能也不一样，也就需要实现配置好开发环境、测试环境、生产环境，需要什么环境下的配置直接使用即可。

1、根目录下新建文件： .env.development（开发环境） 、 .env.test（测试环境） 、 .env.production 文件（生产环境）

2、三个配置文件的配置内容如下：

.env.development（开发环境）配置内容

NODE_ENV = 'development'  //模式
VUE_APP_MODE = 'development'  //通过"VUE_APP_MODE"变量来区分环境
VUE_APP_API_URL = 'http://192.****:8008/api/' //api地址

.env.test（测试环境）配置内容

NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'
outputDir = test

.env.production 文件（生产环境）配置内容

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'http://xxx.xxx.xxx.xx:8008/api/'

3、修改 vue.config.js

module.exports = {

    // 基本路径,相对路径
    publicPath: "./",
    // 输出文件目录
    outputDir: process.env.outputDir,

4、修改 package.json 文件

    "test": "vue-cli-service build --mode test", //打包测试环境
    "publish": "vue-cli-service build && vue-cli-service build --mode test", //测试和生产一起打包

5、判断并使用不用的开发环境配置

if(process.env.VUE_APP_MODE==='development'){
    //开发环境下的执行操作
}else if(process.env.VUE_APP_MODE==='test'){
    //测试环境下的执行操作
}else{
    //生产环境下的执行操作
}