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两种方式都可以。
相关推荐
lemonzoey几秒前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
老家的回忆9 分钟前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W13 分钟前
uniapp全局状态管理实现方案
前端
Vertira14 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
PeterJXL1 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟1 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
buibui1 小时前
打包一个工具类
前端