Nuxt3环境变量配置

Nuxt3 正式发布还不到半年，在投入生产环境使用后，遇到了不少问题，很难找到合适的解决方案，其中环境变量配置就是其中一个，之前一直未能解决，最近要上持续集成，无法绕过这个问题，所以花了点时间研究了一下，最终找到了解决方案，记录一下。

官方文档#

面对一个新框架，我们自然是希望官方文档能够详细地说明使用方式，最初开始使用的时候，并没有关于环境变量配置的说明，甚至可能没有相关功能，不过随着版本的更新，文档中添加了相关的内容，但是安装文档的说明进行配置后并没有生效，后来发现有些是理解偏差，另外还有一些问题我仍然没有解决，不过目前的配置方式已经满足我们的需求，所以这里记录一下研究配置的过程。

关于配置的官网文档： Runtime Config

用于持续集成的命令： nuxi build

环境变量文件的说明： .env

配置文件说明： Nuxt Config

基础变量配置#

最开始我按照官方文档的说明将环境变量配置在了 nuxt.config.ts 文件中，使用起来还是很简单的。

// nuxt.config.ts
runtimeConfig: {apiKey: ""; // Default to an empty string, automatically set at runtime using process.env.NUXT_API_KEYpublic: {baseURL: ""; // Exposed to the frontend as well.}
}// 使用
const config = useRuntimeConfig();
const baseUrl = config.public.baseUrl;

需要暴露在前端的变量写在 public 中，不需要暴露的直接写在 runtimeConfig 下，调用也很方便，但是作为环境变量，仅满足一种环境肯定是不行的，最初我是通过 process.env.NODE_ENV 来判断当前环境，然后根据环境来配置不同的变量，然而上线之后遇到了一个问题，测试环境和正式环境的 NODE_ENV 都是 production ，这样就导致了无法区分环境，所以在很长一段时间内，我都是通过手动修改 nuxt.config.ts 文件来切换环境，这样的方式肯定是不行的，所以我开始寻找解决方案。

.env 文件配置#

参考 Vue Cli 项目，每次执行 run build 的时候，自动读取对应的 .env 文件中的变量进行编译，这样就是我的理想情况，而且我发现官方的文档中后来确实新增了相关的内容，我就想当然地进行了配置，结果却没有生效。

"scripts": {"build": "nuxi build --dotenv .env.production","test": "nuxi build --dotenv .env.test","dev": "nuxi dev --dotenv .env.development -p 3001","generate": "nuxi generate","preview": "nuxi preview","start": "node .output/server/index.mjs"
},

在这里提前说明一下，这个其实就是最终的解决方案，这种写法现在可以生效，早期版本的时候并不支持。

最开始因为文档不完善，使用的人也不多，我只能在官方 GitHub 的 Issues 中寻找有没有类似的问题，因为毕竟是个很常见的需求，当时找到了一些和我有同样困惑的例子。

--dotenv config doesn’t work in production environment

Deployment Nuxt Application on Linux KO

按照作者的回答，我的理解是 .env 文件并不能在 build 环境生效，这一功能是针对 dev 和 preview的，经过我的测试，dev 环境确实没有问题。

根据这两个 issue，我推论环境变量要在启动项目时添加环境变量，于是我根据文档配置 pm2，使用 source .env && node .output/server/index.mjs 启动，结果仍然无法读取环境变量。

pm2 配置#

这里稍微跑个题，虽然没能通过 pm2 成功配置环境变量，但是看到了 pm2 的环境变量配置相关的一些文档，顺便对项目中的配置进行了一些优化。

module.exports = {apps: [{name: "xxx",exec_mode: "cluster",instances: "max", // Or a number of instancesscript: "npm",args: "start",error: "/root/.pm2/logs/xxx-error.log", // 放在系统盘下面-错误日志路径如果不想使用日志 "/root/null"output: "/root/.pm2/logs/xxx-out.log", // 放在系统盘下面-正常日志路径如果不想使用日志 "/root/null"combine_logs: false,merge_logs: false,log_date_format: "YYYY-MM-DD HH:mm Z", // 指定日志文件的时间格式env: {NODE_ENV: "production",PORT: 3001,FRONTEND_VERSION: "v1.0.0",FRONTEND_CLIENTID: "xxx",},env_production: {NODE_ENV: "development",PORT: 3000,FRONTEND_VERSION: "v1.0.0",FRONTEND_CLIENTID: "xxx",},},],
};

环境变量#

一开始我以为 pm2 配置中的 env 是项目中环境变量，设置值之后测试仍然没有效果，仔细查看文档后发现 env 中的字段是固定的，主要是用于启动进程的配置，可以配置不同环境的启动端口和 node 的环境值等。详情可以看文档 环境变量

日志#

pm2 的日志默认是合在一起的，时间久或者访问量大的情况下，日志会非常大，不方便查看，我们可以将日志分开，这样会更方便通过日志查看项目的启动情况。

  1. 安装 pm2-logrotate
$ pm2 install pm2-logrotate
  1. 配置 pm2-logrotate
// 设置日志文件的最大大小，超过这个大小就会进行分割
pm2 set pm2-logrotate:max_size 4M
// 设置压缩日志文件
pm2 set pm2-logrotate:compress true

通过各种配置可以把日志调整到满足我们需求的形式，详情可以看文档 pm2-logrotate

正确的配置#

多次尝试以失败告终之后，我暂时搁置了环境变量的配置问题，但是最近要做持续集成，肯定要通过指令而不是人为修改来完成，所以我又针对环境变量配置进行了测试，最终找到了正确的配置方式。

正如上面 .env 文件配置 一节所说，最终的解决方案就是在 package.json 中配置 run build 的时候指定 .env 文件，这样就可以在编译的时候读取对应的环境变量。不确定是不是最近 nuxt 的版本更新了，这个功能才生效，还是说之前的版本我没有配置正确，总之现在是可以用了。

完整的配置如下：

// package.json
"scripts": {"build": "nuxi build --dotenv .env.production","test": "nuxi build --dotenv .env.test","dev": "nuxi dev --dotenv .env.development -p 3001","generate": "nuxi generate","preview": "nuxi preview","start": "node .output/server/index.mjs"
},

// .env.production
NUXT_API_KEY=https://xxx
NUXT_PUBLIC_BASE_URL=https://xxx

// nuxt.config.ts
runtimeConfig: {apiKey: process.env.NUXT_API_KEY; // Default to an empty string, automatically set at runtime using process.env.NUXT_API_KEYpublic: {baseURL: process.env.NUXT_PUBLIC_BASE_URL; // Exposed to the frontend as well.}
}// 使用
const config = useRuntimeConfig();
const baseUrl = config.public.baseUrl;

但是，问题并没有完全解决，还存在一个问题和一个疑点。

先说问题，Nuxt 的环境变量是在服务端运行的，在客户端并不能获取到环境变量，我这里主要是用于判断环境使用不同的 key 值，process.env.NUXT_PUBLIC_PAGE_WWW 前面还是 process.env，我的理解是这个值的获取是基于 node 的，客户端无法正确读取，所以我在 .env 文件中增加了一个新的变量 VITE_NUXT_ENV=test 用于判断环境，这样就可以在客户端通过 import.meta.env.VITE_NUXT_ENV 获取到环境变量。

感觉上这样的思路存在一些问题，如果有更好的解决方案，欢迎指教或讨论。 

而疑点就在注释里，前面应该也有人注意到，官网文档的注释里写到：

Default to an empty string, automatically set at runtime using process.env.NUXT_API_KEY

意思应该是如果在 runtimeConfig 设置了环境变量，也会自动添加到对应的 process.env 变量中，但是经过我的测试，这个功能并没有生效，不知道是不是哪里有错，如果有人知道，希望能告诉我。

总结#

新框架总是有很多坑，在开发过程中我遇到了很多问题，但是都一一解决了，虽然过程很痛苦，但是收获也很大，希望这篇文章能帮助到和我遇到同样问题的人，也为自己做一个记录。

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

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

相关文章

工厂方法模式介绍

工厂方法模式介绍

韩敬海 设计模式（Java版） （一）定义 定义一个创建对象的接口，让子类决定实例化哪个类。工厂方法使一个类的实例化延迟到其子类。 工厂方法涉及的角色有： 1 .抽象工厂角色：工厂方法模式的核心&am…
阅读更多...
clion软件ide的安装和环境配置@ubuntu

clion软件ide的安装和环境配置@ubuntu

1.官网： Download CLion 2.安装Clion 直接在官网下载并安装即可，过程很简单 https://www.jetbrains.com/clion/ https://www.jetbrains.com/clion/download/#sectionlinux 3.激活码 4.配置Clion 安装gcc、g、make Ubuntu中用到的编译工具是gcc©…
阅读更多...
Redis 列表 | Navicat

Redis 列表 | Navicat

在最近的博客 文章 中，我们已经了解了 Redis 的六种数据类型。其中，Redis 列表（List）包含一组字符串，他们按照被添加的顺序进行排序。本文将就列表数据类型进行展开介绍，并且重点介绍一些主要的命令来管理它…
阅读更多...
RPC和HTTP协议

RPC和HTTP协议

RPC 全称（Remote Procedure Call），它是一种针对跨进程或者跨网络节点的应用之间的远程过程调用协议。 它的核心目标是，让开发人员在进行远程方法调用的时候，就像调用本地方法一样，不需要额外为了完成这个交…
阅读更多...
HAProxy 高级功能与配置

HAProxy 高级功能与配置

HAProxy 高级功能与配置 配置和验证的环境看这篇文章:HAProxy 各种调度算法介绍 一.基于 cookie 的会话保持 使用cookie关键字来配置后端服务器基于 cookie 的会话持久连接。 配置格式 cookie <name> [ rewrite | insert | prefix ] [ indirect ] [ nocache ][ post…
阅读更多...
探究代理服务器在网络安全与爬虫中的双重作用

探究代理服务器在网络安全与爬虫中的双重作用

在如今高度互联的世界中&#xff0c;代理服务器已经成为网络安全和爬虫开发的关键工具。本文将深入探讨Socks5代理、IP代理、网络安全、爬虫、HTTP等关键词&#xff0c;以揭示代理服务器在这两个领域中的双重作用&#xff0c;以及如何充分利用这些技术来保障安全和获取数据。 …
阅读更多...
制作 Mikrotik CHR AWS AMI 镜像

制作 Mikrotik CHR AWS AMI 镜像

文章目录 制作 Mikrotik RouterOS CHR AWS AMI 镜像前言前期准备配置 Access Key安装配置 AWS CLI创建 S3 bucket上传 Mikrotik CHR 镜像trust-policy配置role-policy 配置创建 AMI导入镜像查看导入进度导入进度查看注册镜像参考:制作 Mikrotik RouterOS CHR AWS AMI 镜像 前言…
阅读更多...
MyBatis动态SQL、模糊查询与结果映射

MyBatis动态SQL、模糊查询与结果映射

目录 前言 一、MyBatis动态SQL 1.动态SQL是什么 2.动态SQL的作用 3.常用动态SQL元素 1. where if 元素 2. set if 元素 3. choose when otherwise 元素 4. 自定义 trim 元素 <1>. 自定义 trim 元素改写上面的 where if 语句 <2>. 自定义 trim 元素改…
阅读更多...
将AI融入CG特效工作流；对谈Dify创始人张路宇；关于Llama 2的一切资源；普林斯顿LLM高阶课程；LLM当前的10大挑战 | ShowMeAI日报

将AI融入CG特效工作流；对谈Dify创始人张路宇；关于Llama 2的一切资源；普林斯顿LLM高阶课程；LLM当前的10大挑战 | ShowMeAI日报

&#x1f440;日报&周刊合集 | &#x1f3a1;生产力工具与行业应用大全 | &#x1f9e1; 点赞关注评论拜托啦&#xff01; &#x1f916; 将AI融入CG特效工作流&#xff0c;体验极致的效率提升 BV1pP411r7HY 这是 B站UP主 特效小哥studio 和 拓星研究所 联合投稿的一个AI特…
阅读更多...
SpringBoot 调用外部接口

SpringBoot 调用外部接口

SpringBoot 调用外部接口 一、第一种方式(HttpClient等) 使用插件方式&#xff0c;比如自带的HttpClient&#xff0c;或者OkHttp&#xff0c;甚至是原生的HttpURLConnection 等等&#xff0c;这里以HttpClient为例。 1、封装工具类 简单封装的get请求 /*** 发送get请求:带请求…
阅读更多...
纹波和噪声测试知识

纹波和噪声测试知识

随着开关频率和开关速度不断的提升&#xff0c;在使用开关型的DC/DC电源的时候&#xff0c;要特别关注输入输出电源的纹波。但是测量DC/DC电源的纹波和噪声没有一个行业标准。不同厂家的测试环境以及测试标准都不太一样&#xff0c;导致很多人很迷惑。这篇文章提供了一个简单可…
阅读更多...
go rpc

go rpc

运用go标准库写一个rpc例子 服务端 package mainimport ("fmt""net""net/rpc" )//对象 type Hello struct { } //对象方法 func (h *Hello) HelloWorld(name string, resp *string) error {*resp name "你好"return nil }func mai…
阅读更多...
赋能道路交通场景，九州未来助力建成广西交科车路协同智能网联示范园区

赋能道路交通场景，九州未来助力建成广西交科车路协同智能网联示范园区

智慧高速车路协同需要更加稳固的技术基座 智慧高速是中国高速公路建设的热点之一&#xff0c;车路协同又是未来智慧高速建设的核心内容。高速公路运行环境相对简单、主体权责清晰、路侧机电设施齐全&#xff0c;具备开展车路协同创新示范的良好条件。 广西交科集团&#xff0…
阅读更多...
编程锦囊妙计——快速创建本地Mock服务

编程锦囊妙计——快速创建本地Mock服务

点击上方&#x1f446;蓝色“Agilean”&#xff0c;发现更多精彩。 前情提要 在本系列上一篇文章《全文干货&#xff1a;打破前后端数据传递鸿沟&#xff0c;高效联调秘笈》中我们分享了使用Zod这一运行时类型校验库来对后端服务响应结果进行验证达到增加项目质量的方式。 这次…
阅读更多...
三维重建_体素重建_空间雕刻法/体素着色法

三维重建_体素重建_空间雕刻法/体素着色法

目录 1. 三角化和体素重建的区别 2. 空间雕刻法 空间雕刻法的一致性定义 空间雕刻法具体实现 基于八叉树的空间雕刻法具体实现​编辑 空间雕刻法效果展示 3. 体素着色法 体素着色法的缺点&#xff1a;不唯一性​编辑 体素着色法不唯一性解决措施​编辑 体素着色发实验环境与…
阅读更多...
Ansible 自动化安装软件

Ansible 自动化安装软件

例子如下&#xff1a; 创建一个名为/ansible/package.yml 的 playbook : 将 php 和 mariadb 软件包安装到 dev、test 和 prod 主机组中的主机上 将 RPM Development Tools 软件包组安装到 dev 主机组中的主机上 将 dev 主机组中主机上的所有软件包更新为最新版本 --- - name:…
阅读更多...
Linux系统安全：NAT（SNAT、DNAT）

Linux系统安全：NAT（SNAT、DNAT）

目录 一.NAT 二.SNAT 三.DNAT 一.NAT NAT: network address translation&#xff0c;支持PREROUTING&#xff0c;INPUT&#xff0c;OUTPUT&#xff0c;POSTROUTING四个链 请求报文&#xff1a;修改源/目标IP&#xff0c; 响应报文&#xff1a;修改源/目标IP&#xff0c;根据…
阅读更多...
单片机的串口通信

单片机的串口通信

今天&#xff0c;完整地总结一下普中科技的单片机的串口通信的硬件与编程&#xff0c;记录一下以后如果需要也比较方便捡起来。 单片机的串口部分的电路图。开发板上集成了 1 个串口通信电路&#xff0c;是 USB 转串口模块&#xff0c;它既可下载程序也可实现串口通信功能。 对…
阅读更多...
WEB APIs day5

WEB APIs day5

一、window对象 BOM属于window对象 1.BOM&#xff08;浏览器对象模型&#xff09; bom里面包含着dom,只不过bom我们平时用得比较少&#xff0c;我们经常使用的是dom操作&#xff0c;因为我们页面中的这些标签都是在dom中取的&#xff0c;所以我们操作dom多一点。 window对象…
阅读更多...
python代码——批量将PPT转换成长图

python代码——批量将PPT转换成长图

语言&#xff1a;python 3 用法&#xff1a;点击运行后&#xff0c;弹出窗口&#xff0c;选择文件夹&#xff0c;程序运行会将文件夹内的所有PPT文件全部转换成PPT长图&#xff0c;图片名称与PPT文件名称相同&#xff0c;保存位置相同。 如运行中报错&#xff0c;需要自行根据…
阅读更多...
最新文章

Copyright @ 2022~2023