Vite如何区分不同环境的不同后端地址

vite区分不同的环境

我们可以使用如下几种配置文件在本地区分环境：

.env.dev
.env.production
.env.test

比如说：研发、生成、测试的路径是不一样的，现在是三个文件的内容：

.env.dev
VITE_API_URL='http://1.1.1.1'
VITE_TITLE='研发'

.env.test
VITE_API_URL='http://2.2.2.2'
VITE_TITLE='测试'

.env.production
VITE_API_URL='http://3.3.3.3'
VITE_TITLE='生产'

我们也可以在前端配置代理解决跨域问题：

server: {
    port: 3000,
    proxy: {
        '/api': {
  			target: loadEnv(mode, process.cwd()).VITE_API_URL,
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, '')
        }
    }
}

我们完全可以打三个不同的包：

vite build --mode dev
vite build --mode test
vite build # 默认读取.env.production配置

此时你可能会想，打不同的包之后，我直接预览，是不是就能采用不同的后台地址了？执行如下指令：<