正在进入ing...

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

发布时间:2022-09-03 浏览量: 134 文章分类: 前端相关

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

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里面进行如下增加

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