webpack配置生产、开发、测试环境及使用

本文链接：https://blog.csdn.net/qq_40686529/article/details/108643941

本文介绍了在基于vue-cli 3.x的项目中如何配置开发、生产、测试环境的请求路径。通过创建不同环境的配置文件，设置环境变量，并在main.js中根据环境变量动态导入API接口。此外，还展示了如何创建api.js模块，用于管理和拼接不同的API请求地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近做项目的时要区分各种环境的请求地址，基于vue-cli 3.x使用webpack模板创建的项目，所以没有build文件夹。想配置三个环境下的请求路径。

1、根目录下新建三个文件.env.development、.env.test、.env.production文件（复制这三个文件名）

2、分别写入如下代码：
.env.development：

NODE_ENV = 'development'
VUE_APP_MODE = 'development'
VUE_APP_API_URL = 'http://192.168.1.235:8883'

.env.test：

NODE_ENV = 'production'
VUE_APP_MODE = 'test'
VUE_APP_API_URL = 'http://192.168.1.235:8883'
outputDir = test

.env.production：

NODE_ENV = 'production'
VUE_APP_MODE = 'production'
VUE_APP_API_URL = 'http://192.168.1.235:8883'

测试：在main.js文件中输入console.log(process.env.VUE_APP_MODE);
此时的结果应该是开发环境。在这里插入图片描述
我又在根目录下新建了一个baseURL.js文件，单独输出请求域名（因为请求的域名之后还会有请求参数，需要自己拼接），代码如下：

let baseURL = ''
switch (process.env.VUE_APP_MODE) {
    case 'development':
        baseURL = 'http://192.168.1.235:8883'
        break;
    case 'production':
        baseURL = 'http://192.168.1.235:8883'
        break;
    case 'test':
        baseURL = 'http://192.168.1.235:8883'
        break;
}

export default baseURL

接口：：
新建api.js文件夹，里面新建需要请求的api，例如我的searchFee.js:


     import baseURL from "../baseURL";
     const fullURL = baseURL + "/api/v2/payment/info";
     export default function getFee (){
     return  axios
        .post(fullURL, {
          carNum: 0,
        })
        .then((res) => {
       return Promise.resolve(res)
    }),
     }

使用：

import getFee from './api/searchFee.js'
  getFee.then((res)=>{
  console.log(res)
})