vue3+vite实现环境变量配置~

1、作用:在Vite中,我们可以使用环境变量来管理不同环境下的配置。Vite支持使用.env文件来配置环境变量,不同的环境可以使用不同的.env文件来管理配置。

2、创建不同环境的.env文件

在vue3根目录下创建三个文件分别为.env.develoment.env.test.env.production

2.1在不同的.env文件中配置相应的环境变量

.env.develoment
TypeScript 复制代码
NODE_ENV='development'

VUE_APP_OSS_API = '/ossApi'
.env.test
TypeScript 复制代码
NODE_ENV='test'

VITE_APP_API_URL=''
.env.production
TypeScript 复制代码
NODE_ENV='production'

VITE_APP_API_URL='http://iblog.ishareread.com'

这里我们主要通过VITE_APP_API_URL变量来区分不同的环境调用不同的接口,在开发环境调用本地接口http://localhost:8000,在测试环境用mock接口,在生产环境调用真实接口。

3、在vue.config.js文件中配置baseurl。

TypeScript 复制代码
// oss上传
'/ossApi': {
   target: 'baseURL地址', // 目标服务器地址
   changeOrigin: true, // 允许改变 Origin
   ws: true,
   secure: false,
   logLevel: 'debug',
   pathRewrite: {
      '^/ossApi': '', // 重写路径,将 /ossApi 替换为空
   },
},

4、定义类型,在evn.d.ts中

TypeScript 复制代码
/**
 * 环境变量类型声明
 */
declare namespace NodeJS {
  interface Process {
    env: {
      VUE_APP_OSS_API: string;
    };
  }
}

5、api解耦中使用环境变量。

TypeScript 复制代码
const api_rul = import.meta.env.VUE_APP_OSS_API
//const VUE_APP_OSS_API = process.env.VUE_APP_OSS_API;
export function queryAutograph(params) {
  return request({
    url: `${api_rul}/oss/getSign`,
    method: 'get',
    params,
  });
}
相关推荐
shmily_yyA6 分钟前
Nextjs15 实战 - React Notes之SidebarNoteList优化和Suspense的使用
前端·react.js·前端框架
知识分享小能手7 分钟前
CSS3学习教程,从入门到精通, 化妆品网站 HTML5 + CSS3 完整项目(26)
前端·javascript·css·学习·css3·html5·媒体
了不起的码农29 分钟前
ES6对函数参数的新设计
前端·ecmascript·es6
XH2761 小时前
Android 通知用法详解
前端
陈随易1 小时前
盘点23个Nodejs的替代品Bun的实用功能
前端·后端·程序员
uhakadotcom1 小时前
兄弟们,炸裂了!llama 4发布了!又有哪些创业公司被颠覆了?
前端·算法·面试
uhakadotcom1 小时前
EventEmitter3:高性能事件发射器的使用与优势
前端·javascript·面试
XH2761 小时前
Android Bitmap.createBitmap() 用法全解析
前端·设计
XH2761 小时前
Android ContentResolver地点增删改查详解
前端·后端
uhakadotcom1 小时前
🎭 Playwright:跨浏览器自动化测试框架
前端·javascript·面试