开发日记14-vite配置多环境

wanzhong23332026-01-21 8:14

为什么要配置多环境，因为开发的时候，获取后端数据的baseUrl是不一样的，端口也可能不一样。所以我们要配置一下，以便于以后切换。这里举个例子：

我们在web目录下，新增一个.env文件，将目前调取后端数据用到的base url配置上

复制代码

VITE_SERVER=http://localhost:18000

再配置一个生产时用到的文件.env.prod，暂时就改一个端口意思意思

复制代码

VITE_SERVER=http://localhost:18001

如果还有测试，还可以增加.env.test，这里不多赘述

为了让vite能找到，可以增加配置/data/wz/JavaProject/im-nls/web/package.json

复制代码

  "scripts": {
    "dev": "vite",
    "prod": "vite --mode=prod",
    "build": "vite build",
    "preview": "vite preview"
  },

这里新增了一个 "prod": "vite --mode=prod", 在打包的时候，会自动寻找prod结尾的文件，引入其中的所有变量。

我们在main.js中这样引入，使得axios在get或者post请求的时候，隐式的添加baseUrl前缀

复制代码

axios.defaults.baseURL = import.meta.env.VITE_SERVER

就可以这样了：

复制代码

axios.get("/nls/query", {
  params: {
    "mobile": "Huawei"
  }

我们可以在控制台打印出来看看是不是真的读到了，

复制代码

console.log("服务端：", import.meta.env.VITE_SERVER)
axios.defaults.baseURL = import.meta.env.VITE_SERVER

现在可以试试，重新执行prod，试试prod环境，ok，没问题