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两种方式都可以。
相关推荐
cxr8281 小时前
BMAD框架实践:掌握story-checklist提升用户故事质量
前端·人工智能·agi·智能体·ai赋能
emma羊羊1 小时前
【xsslabs】第12-19关
前端·javascript·靶场·xss
真的想不出名儿4 小时前
vue项目引入字体
前端·javascript·vue.js
胡楚昊4 小时前
Polar WEB(1-20)
前端
吃饺子不吃馅4 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防5 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump5 小时前
前端部署工具 PinMe
运维·前端·开源
-D调定义之崽崽6 小时前
【初学】使用 node 编写 MCP Server
typescript·node·mcp
Baklib梅梅6 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
慧一居士6 小时前
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结,示例演示、使用场景介绍、完整对比总结
前端