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中查看即可。