Quasar框架使用环境变量声明接口地址，无需手动判断

腾梦

已于 2022-05-25 13:16:59 修改

阅读量704

点赞数

文章标签： vue.js 前端

于 2022-05-24 18:17:25 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43815091/article/details/124951953

版权

本文介绍了如何在Quasar框架中使用环境变量动态设置API接口地址，通过修改quasar.config.js文件，根据开发或生产环境自动选择不同的API基础路径。在boot/axios.ts中，利用process.env.env_API创建axios实例，实现接口请求的基础URL切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Quasar框架使用环境变量声明接口地址，无需手动判断

声明方法：

quasar.config.js 文件修改env_API

build: {
  vueRouterMode: 'hash', // available values: 'hash', 'history'
    env: {
    env_API: ctx.dev
      ? 'https://dev.host.com/api'
      : 'https://prod.host.com/api'
  }

使用：调用 process.env.env_API:

const env_API =process.env.env_API

reurn{env_API}

boot/axios.ts中

const api = axios.create({ baseURL: process.env.env_API });