nuxt3 env文件、全局变量处理

有两种方向

  1. 通过配置nuxt.config.ts + Nuxt提供的钩子函数,实现全局变量的获取

    1. runtimeconfig

    2. env文件往runtimeconfig放入内容

    3. useAppConfig

  2. 通过env文件配置来获取服务端全局变量,客户端通过vite.define实现

nuxt.config.ts + Nuxt钩子

1. runtimeconfig服务端|全局变量

nuxt.config.ts文件中,配置runtimeconfig对象,该对象的值只能使用useRuntimeConfig从服务器访问到,适合配置一些API秘钥相关的不暴露给前端的数据

但其中runtimeConfig.publicruntimeConfig.app中的值会暴露给前端

export default defineNuxtConfig({runtimeConfig: {apiKey: "xxx", // 该值只能在服务端获取// public中的值会暴露给前端public: {baseURL: "https://www.blockxu.top",},},
})

客户端获取:

请添加图片描述

服务端获取:

请添加图片描述

2. env文件覆盖runtimeConfig中内容

如果在env文件中设置了相同名称(NUXT_API_xxxNUXT_PUBLIC_xxx)的变量,就会覆盖掉runtimeConfig|runtimeConfig.app|runtimeConfig.public中的变量

NUXT_API_KEY = 'my-api-key'
NUXT_PUBLIC_BASE_URL = '/foo/'

请添加图片描述

3. app.config.ts文件配置内容

在根目录创建app.config.ts,文件内部的变量可以useAppConfig()获取到

export default defineAppConfig({foo: "bar",title: "Hello Nuxt",theme: {dark: true,colors: {primary: "#ff0000",},},
});
const appConfig = useAppConfig();
console.log("---appConfig.foo", appConfig.foo); // 输出 => "bar"

env文件写入、process.env获取

终端命令中添加--dotenv .env.dev

注:如果只写--dotenv .env.dev,只能在运行时获取到

"dev": "nuxt dev --dotenv .env.dev"
"build": "nuxt build --dotenv .env.prod"
...
VUE_APP_VALUE = 'VALUE123123' 
VUE_APP_BASEURL = 'https://www.blockxu.top'
...

运行后,在服务器上,通过process.env.VUE_APP_VALUE就可以获取到对应的变量

console.log(process.env.VUE_APP_VALUE) // => 'VALUE123123' 

该方法只能在服务端获取,客户端中无法获取到env文件中的内容[UnhandledSchemeError: Reading from “virtual:windi.css” is not handled by plugins (Unhandled scheme).](UnhandledSchemeError: Reading from “virtual:windi.css” is not handled by plugins (Unhandled scheme).)

console.log("-----------process.env", process.env); // 客户端

请添加图片描述
请添加图片描述

服务端:

请添加图片描述

放入process.env

在执行build后nuxt build --dotenv .env.prod,不论在客户端还是服务端,都无法获取到process.env

console.log("-----------process");
try {console.log(process);
} catch (error) {console.log("error", error);
}

请添加图片描述

解决办法

通过vite实现

let define = {};
// 处理process.env以便在客户端能够取到
Object.keys(process.env).forEach((name) => {define["process.env." + name] = JSON.stringify(process.env[name]);
});export default defineNuxtConfig({vite: {define: {...define,}}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/319523.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何修复卡在恢复模式的Android 手机并恢复丢失的数据

Android 系统恢复是一项内置功能,如果您的 Android 设备无法正常工作或触摸屏出现问题,该功能会很有帮助。您可以启动进入恢复模式并使用它来恢复出厂设置您的 Android 设备,而无需访问设置。此外,它还经常用于重新启动系统、从 A…

关于MIPS上手应知应会-如何把C语言改写为MIPS!

文章目录 寄存器指令使用技巧翻译C/Cif/else语句switch语句for循环while 循环do...while循环一维数组定义与使用二维数组定义与使用例 :哈密顿回路 注意立即数被符号位扩展 参考链接 寄存器 NameReg. NumUsage z e r o zero zero0constant value 0(恒为0) a t at a…

「实战应用」如何用DHTMLX Gantt构建类似JIRA式的项目路线图(一)

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求,是最完善的甘特图图表库。 在web项目中使用DHTMLX Gantt时,开发人员经常需要满足与UI外观相关的各种需求。因此他们必须确定JavaScript甘特图库的…

C#编程-描述内存分配

描述内存分配 分配给变量的内存通过两种方式引用:值类型和引用类型。内置数据类型,诸如int、char和float都是值雷兴国。当您声明int变量时,编译器会分配一个内存块以保持该整数值。请思考以下语句: int Num 50;上述语句为保存值…

进阶学习——Linux系统中重点‘进程’

目录 一、程序和进程的关系 1.程序 2.进程 2.1线程 2.2协程 3.进程与线程的区别 4.总结 4.1延伸 5.进程使用内存的问题 5.1内存泄漏——Memory Leak 5.2内存溢出——Memory Overflow 5.3内存不足——OOM(out of memory) 5.4进程使用内存出现…

计算机视觉中的神经网络可视化工具与项目

前言 本文介绍了一些关于神经网络可视化的项目,主要有CNN解释器,特征图、卷积核、类可视化的一些代码和项目,结构可视化工具,网络结构手动画图工具。 CNN解释器 这是一个中国博士发布的名叫CNN解释器的在线交互可视化工具。 主要…

亚信安全捕获银狐木马控制端样本,揭晓最新发现

近日,亚信安全威胁情报中心获取到银狐远控样本,通过远控端生成一个Payload并对Payload进行分析,还原了银狐组织攻击的完整过程。建议相关用户部署全面防病毒产品,积极采取相关措施。 银狐木马简介 攻击者总是会将钓鱼页面部署在个…

第二证券机构策略:股指预计维持蓄势震荡格局 关注煤炭、电力等板块

第二证券以为,技能面看,在元旦节前资金抄底推进指数收回2900整数关口,并向着3000点渠道压力前进。沪指在底部均线位支撑摆放较强,调整空间估计不大,在3000点渠道下方调整就是再次优化低吸的时机。操作上,在…

[Flutter]WindowsOS上运行遇到的问题总结

[Flutter]WindowsOS上运行遇到的问题总结 写在开头 Flutter项目已能在移动端完美使用后,想看看在桌面端等使用情况 基于Flutter3.0后已支持Windows/MacOS等桌面端,不过具体的系统,还需要看下官方文档解释。 这里抛出文档地址,可…

力扣hot100 二叉树的直径

👨‍🏫 题目地址 一个节点的最大直径 它左树的深度 它右树的深度 😋 AC code /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* Tr…

XYZ世代

Z世代,Gen Zers,Generation Z ,一词最早出现于欧美地区,是美国及欧洲的流行用语,泛指在1995-2009年间出生的一代人,千禧后一代。又称网络世代、互联网世代,网生代,二次元世代&#x…

基于Vue开发的一个仿京东电商购物平台系统(附源码下载)

电商购物平台项目 项目完整源码下载 基于Vue开发的一个仿京东电商购物平台系统 Build Setup # csdn下载该项目源码压缩包 解压重命名为sangpinghui_project# 进入项目目录 cd sangpinghui_project# 安装依赖 npm install# 建议不要直接使用 cnpm 安装以来,会有各…