07vue3实战-----辨析开发环境和生产环境

07vue3实战-----辨析开发环境和生产环境

很多公司的开发环境的服务器地址和生产环境的服务器地址不一样。

1.Vite的环境变量

Vite 在一个特殊的import.meta.env对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量。之前webpack是使用process对象来暴露的,process是基于node的。

  • import.meta.env.MODE: {string} 应用运行的模式。
  • import.meta.env.PROD: {boolean} 应用是否运行在生产环境。
  • import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
  • import.meta.env.SSR: {boolean} 应用是否运行在 server 上。

2.修改axios的封装

在上一章节中https://blog.csdn.net/fageaaa/article/details/145480312有一小部分我讲了axios的再封装,为了更好区分当前环境,所以需要对部分代码进行优化。

service/config/index.ts:

javascript 复制代码
let BASE_URL = ''
if (import.meta.env.PROD) {
  // 生产环境
  BASE_URL = 'http://xxx.prod:4000'
} else {
  // 开发环境
  BASE_URL = 'http://xxx.dev:4000'
}
const TIME_OUT = 10000;
export {
    BASE_URL,
    TIME_OUT 
}

3.测试

通过npm run dev在开发环境下运行;npm run build打包项目,然后通过npm run preview可以预览打包后的项目

4.Vite使用dotenv加载额外的环境变量

除了上述的import.meta.env可以加载环境变量,我们还可以从环境目录中的下列文件加载额外的环境变量。

例如,我在项目根目录下建三个文件,.env、.env.development和.env.production三个配置文件。注意模式的单词不要写错了

分别在三个文件中配置一些东西。

.env:

javascript 复制代码
 VITE_NAME=why

.env.development:

javascript 复制代码
 VITE_URL=dev

.env.production:

javascript 复制代码
 VITE_URL=prod

然后再axios的封装模块serive中可以进行测试:

service/config/index.ts:

javascript 复制代码
let BASE_URL = ''
if (import.meta.env.VITE_URL == 'prod') {
  // 生产环境
  BASE_URL = 'http://xxx.prod:4000'
} else {
  // 开发环境
  BASE_URL = 'http://xxx.dev:4000'
}
const TIME_OUT = 10000;
export {
    BASE_URL,
    TIME_OUT 
}

注意:

  • 只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。
  • .env文件里面的配置不管啥时候都会加载;.env.development文件的配置只有在项目是开发模式才会加载;.env.production文件的配置只有在项目是生产模式才会加载;
  • 如果项目配置很多,用dotenv这种方法更好;如果配置比较少,用import.meta.env和dotenv两种方式都可以。
相关推荐
kk不中嘞17 小时前
Webpack 核心原理剖析
前端·webpack·node.js
葡萄城技术团队17 小时前
TypeScript 队列实战:从零实现简单、循环、双端、优先队列,附完整测试代码
typescript
Yvonne爱编码17 小时前
简述ajax、node.js、webpack、git
前端·git·ajax·webpack·node.js·visual studio
周小码17 小时前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
哆啦A梦158817 小时前
Element-Plus
前端·vue.js·ts
IT_陈寒17 小时前
🔥3分钟掌握JavaScript性能优化:从V8引擎原理到5个实战提速技巧
前端·人工智能·后端
前端小巷子18 小时前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia18 小时前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
鹏多多.18 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
Mintopia18 小时前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js