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两种方式都可以。
相关推荐
灵感__idea2 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴3 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动4 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数5 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript