Vite解决开发、生产服务器的自动切换

如果每次都是手动去来回切换,很容易因为认为的疏忽造成事故,所以很多时候还是希望可以根据项目的状态,自动来切换请求的服务器是开发服还是生产服。

vite提供了.env文件,这个文件是环境变量问题,默认提供了四种文件格式

    .env               # 所有情况下都会加载
    .env.local         # 所有情况下都会加载,但会被 git 忽略
    .env.[mode]        # 只在指定模式下加载
    .env.[mode].local  # 只在指定模式下加载,但会被 git 忽略

其中我们可以使用.env[mode]的格式可以在不同模式下加载不同内容

  • 在根目录新建.env.development文件,表示开发时的.env文件

# .env.development

VITE_BASE_API = '/api'
  • 在根目录新建.env.production文件,表示线上环境时的.env文件

# .env.production

VITE_BASE_API = '/v1-api'

注意:vite里面默认只有VITE_为前缀的变量才会暴漏出去给vite进行处理,所以变量应该是以VITE_开头

验证

  • request.js里面进行如下增加

import axios from 'axios'

// 新增了下面这条,让他输出当前的地址,可以在浏览器console中进行查看
console.log(import.meta.env.VITE_BASE_API)

const service = axios.create({
  // 根据项目的状态,自动切换请求的服务地址
  baseURL: import.meta.env.VITE_BASE_API,
  timeout: 5000,

})

 export default service
    
  • 线上环境测试

执行npm run build,先对项目进行打包。然后cd dist 运行anywhere(如果没安装的话,可以运行npm install anywhere -g),在去浏览器console中查看即可。

Last updated