当前位置:   article > 正文

vite项目配置根据不同的打包环境使用不同的请求路径VITE_BASE_URL,包括报错解决_vite 配置请求url

vite 配置请求url

vite环境配置可以看官方文档:环境变量和模式 | Vite 官方中文文档

创建环境配置文件

在项目根目录下面创建.env和.env.production文件,.env是开发环境使用的,.env.production是生产环境使用的。

.env文件:

  1. # 基本环境
  2. VITE_APP_NAME='开发环境'
  3. # 基本请求地址
  4. VITE_BASE_URL='http://192.168.1.243:9080'

.env.production:

  1. # 基本环境
  2. VITE_APP_NAME='生产环境'
  3. # 基本请求地址: 这样做的好处是当你把项目部署到对应的域名或者ip下面后,会自动使用该域名或ip的地址,也就是当前地址
  4. VITE_BASE_URL=''

项目中使用的话,会提示 import.meta 上没有env属性:

修改tsconfig.json添加:

"types": ["vite/client"],

就不会有提示了: 

在项目中使用

比如配置axios请求的时候,要修改url地址

  1. const requests = axios.create({
  2. //配置对象
  3. //基础路径,requests发出的请求在端口号后面会跟改baseURl
  4. baseURL: `${import.meta.env.VITE_BASE_URL}/v1`,
  5. //代表请求超时的时间5s
  6. timeout: 5000,
  7. })
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/338750?site
推荐阅读
相关标签
  

闽ICP备14008679号