欢迎加入开源鸿蒙PC社区 https://harmonypc.csdn.net/欢迎在PC社区平台申请新建项目https://atomgit.com/OpenHarmonyPCDeveloperAtomGit 仓库地址https://atomgit.com/OpenHarmonyPCDeveloper/ohos_node_vue_ts本文完整梳理了ARM64架构鸿蒙PCHarmonyOS/OpenHarmony6.1及以上基于CodeArts IDE搭建ViteVue前端项目的全流程与疑难解决方案。项目实操中Vite启动会出现rolldown原生模块权限拒绝报错根源是鸿蒙系统拦截未签名二进制文件最终解决方案为引入ohos-signpost自动签名工具配置npm后置钩子在依赖安装完成后自动为所有.node文件添加系统合法签名消除权限校验拦截最终实现CodeArts IDE内VueTS项目正常启动、调试。这里有一篇比较详细的攻略OpenHarmony 鸿蒙 PC CodeArts IDE 前端 ViteVue 完整开发环境搭建指南一、dotenv 库完整介绍1. 作用与定位dotenv是 Node.js 环境变量管理库读取项目根目录.env文件把自定义配置注入process.env解决硬编码密钥、环境区分问题。核心功能分离配置与代码数据库账号、密钥、接口地址写在.env不提交Git多环境区分支持.env.development/.env.production/.env.local自动类型转换、变量插值、空值默认值兼容鸿蒙PC Node、Vite、Express、脚本、后端服务配合.gitignore保护隐私密钥防止账号泄露。开发业务场景数据库连接地址、账号密码JWT加密密钥、第三方API keyOSS/短信/支付服务端口、线上/线下接口域名功能开关、日志级别、文件存储路径。2. 安装命令npmi dotenv# TS项目类型提示npmi-Dtypes/dotenv步骤1新建4个环境配置文件.env公共基础配置所有环境共用# 服务基础配置 SERVER_PORT3000 APP_NAME鸿蒙Node后端Demo LOG_LEVELinfo # 数据库公共 DB_HOST127.0.0.1 DB_PORT3306 DB_NAMEtest_db.env.development开发环境# 开发环境接口地址 API_BASE_URLhttp://127.0.0.1:8080/dev # 开发库账号 DB_USERdev_user DB_PASS123456dev # 调试开关 DEBUGtrue.env.production生产环境API_BASE_URLhttps://api.prod-harmonypc.com DB_USERprod_user DB_PASSsuperSecure123! DEBUGfalse # JWT密钥 JWT_SECRETprod_abc123456_secret_key.env.local本地私有git忽略本机个性化# 本机本地覆盖配置优先级最高 SERVER_PORT3001 LOG_LEVELdebug步骤2新建.gitignore避免密钥提交# 环境配置禁止上传 .env .env.local .env.development.local .env.production.local node_modules dist步骤3主代码 envDemo.jsCommonJS兼容鸿蒙Node// 导入dotenv核心constdotenvrequire(dotenv);constpathrequire(path);constfsrequire(fs-extra);/** * 工具根据NODE_ENV加载对应环境文件支持多层覆盖 * 优先级.env.local .env.xxx .env */functionloadEnvByMode(){// 读取运行时环境标识默认开发环境constenvModeprocess.env.NODE_ENV||development;console.log(当前运行环境 NODE_ENV ${envMode}\n);// 配置文件路径定义constenvPaths[path.resolve(__dirname,.env),// 公共基础path.resolve(__dirname,.env.${envMode}),// 环境专属path.resolve(__dirname,.env.local),// 本地私有最高优先级];// 按顺序加载后加载的变量会覆盖前面同名变量envPaths.forEach(filePath{if(fs.pathExistsSync(filePath)){constenvContentfs.readFileSync(filePath,utf8);dotenv.parse(envContent);dotenv.config({path:filePath});console.log(已加载配置文件${path.basename(filePath)});}else{console.log(跳过不存在文件${path.basename(filePath)});}});console.log();}/** * 示例1读取普通字符串、数字、布尔环境变量 */functiondemoReadBasicEnv(){console.log( 1. 读取基础环境变量 );constportprocess.env.SERVER_PORT;constappNameprocess.env.APP_NAME;constlogLevelprocess.env.LOG_LEVEL;constdebugSwitchprocess.env.DEBUGtrue;console.log(服务端口(字符串):,port);console.log(项目名称:,appName);console.log(日志等级:,logLevel);console.log(调试开关(布尔转换):,debugSwitch,typeofdebugSwitch);console.log();}/** * 示例2数据库配置封装统一组装连接字符串 */functiondemoDbConfig(){console.log( 2. 数据库配置组装 );constdbConfig{host:process.env.DB_HOST,port:Number(process.env.DB_PORT),database:process.env.DB_NAME,user:process.env.DB_USER,password:process.env.DB_PASS,};console.log(完整数据库配置对象,dbConfig);constconnectStrmysql://${dbConfig.user}:${dbConfig.password}${dbConfig.host}:${dbConfig.port}/${dbConfig.database};console.log(拼接数据库连接串,connectStr);console.log();}/** * 示例3接口域名、密钥敏感配置读取 */functiondemoSecretConfig(){console.log( 3. 接口与密钥敏感配置 );constapiUrlprocess.env.API_BASE_URL;constjwtKeyprocess.env.JWT_SECRET||default_test_key;console.log(后端接口地址,apiUrl);console.log(JWT加密密钥兜底默认值,jwtKey);console.log();}/** * 示例4手动解析env文本字符串动态加载内容场景 */functiondemoParseManual(){console.log( 4. dotenv.parse 手动解析文本 );constenvTextCACHE_EXPIRE3600 REDIS_HOST127.0.0.1;constparsedObjdotenv.parse(envText);console.log(手动解析文本得到对象,parsedObj);console.log(缓存过期时间,parsedObj.CACHE_EXPIRE);console.log();}/** * 示例5校验必填环境变量缺失直接终止程序 */functiondemoEnvValidate(){console.log( 5. 环境变量必填校验生产必备 );constrequiredKeys[SERVER_PORT,DB_HOST,API_BASE_URL];letmissing[];for(constkeyofrequiredKeys){if(!process.env[key]){missing.push(key);}}if(missing.length0){console.error(❌ 缺失必填环境变量,missing);process.exit(1);// 缺少关键配置直接退出进程}console.log(✅ 所有必填环境变量校验通过);console.log();}/** * 统一入口执行所有示例 */asyncfunctionrunAllDemo(){// 第一步按环境加载对应.env配置loadEnvByMode();demoReadBasicEnv();demoDbConfig();demoSecretConfig();demoParseManual();demoEnvValidate();console.log( dotenv 全部功能示例执行完成);}// 执行runAllDemo().catch(err{console.error(程序异常,err);});代码逐段完整讲解 dotenv 多环境配置示例一、头部依赖导入constdotenvrequire(dotenv);constpathrequire(path);constfsrequire(fs-extra);dotenv核心库读取.env配置文件将键值注入全局process.envpath处理文件绝对/相对路径兼容鸿蒙、Windows、macOS 不同系统路径分隔符fs-extra增强文件工具pathExistsSync判断配置文件是否存在原生 fs 判断文件更繁琐。二、核心工具函数 loadEnvByMode 多环境分层加载功能说明根据NODE_ENV环境标识自动加载三套配置文件后加载文件同名变量会覆盖前面优先级规则.env.local(本地私有) .env.xxx(开发/生产) .env(公共基础)。functionloadEnvByMode(){// 读取运行时环境标识未指定默认 development 开发环境constenvModeprocess.env.NODE_ENV||development;console.log(当前运行环境 NODE_ENV ${envMode}\n);// 配置文件加载顺序公共基础 → 对应环境 → 本地私有constenvPaths[path.resolve(__dirname,.env),path.resolve(__dirname,.env.${envMode}),path.resolve(__dirname,.env.local),];envPaths.forEach(filePath{// 判断文件存在才加载不存在直接跳过不报错if(fs.pathExistsSync(filePath)){// 读取文件原始文本constenvContentfs.readFileSync(filePath,utf8);// parse 仅解析文本为对象不会挂载到 process.envdotenv.parse(envContent);// config 真正将文件内变量注入全局 process.envdotenv.config({path:filePath});console.log(已加载配置文件${path.basename(filePath)});}else{console.log(跳过不存在文件${path.basename(filePath)});}});console.log();}关键知识点NODE_ENV运行脚本时手动指定NODE_ENVproduction node xxx.js切换生产环境分层设计好处.env所有环境共用通用配置端口、库名、日志等级.env.development开发专用本地数据库、调试开关.env.production线上正式密钥、线上接口地址.env.local本机个性化配置不上传Git优先级最高用来临时覆盖端口、账号dotenv.parse()只解析文本生成键值对象不写入全局dotenv.config()才会挂载到process.env。三、示例1 demoReadBasicEnv 基础类型读取functiondemoReadBasicEnv(){console.log( 1. 读取基础环境变量 );constportprocess.env.SERVER_PORT;constappNameprocess.env.APP_NAME;constlogLevelprocess.env.LOG_LEVEL;// .env 内所有值都是字符串需要手动转布尔constdebugSwitchprocess.env.DEBUGtrue;console.log(服务端口(字符串):,port);console.log(项目名称:,appName);console.log(日志等级:,logLevel);console.log(调试开关(布尔转换):,debugSwitch,typeofdebugSwitch);console.log();}所有.env读取出来的数据全部为字符串数字、布尔都需要手动转换布尔判断标准判断字符串是否严格等于true其余值都为 false全局任意文件都能直接使用process.env.xxx获取配置无需重复加载文件。四、示例2 demoDbConfig 数据库配置封装functiondemoDbConfig(){console.log( 2. 数据库配置组装 );constdbConfig{host:process.env.DB_HOST,port:Number(process.env.DB_PORT),// 端口转数字database:process.env.DB_NAME,user:process.env.DB_USER,password:process.env.DB_PASS,};console.log(完整数据库配置对象,dbConfig);// 拼接标准mysql连接字符串直接供数据库驱动使用constconnectStrmysql://${dbConfig.user}:${dbConfig.password}${dbConfig.host}:${dbConfig.port}/${dbConfig.database};console.log(拼接数据库连接串,connectStr);console.log();}业务场景将零散的数据库配置整合为统一配置对象统一生成连接地址避免代码各处重复读取环境变量。五、示例3 demoSecretConfig 敏感密钥默认兜底functiondemoSecretConfig(){console.log( 3. 接口与密钥敏感配置 );constapiUrlprocess.env.API_BASE_URL;// 兜底默认值环境变量不存在时使用备用密钥防止 undefined 报错constjwtKeyprocess.env.JWT_SECRET||default_test_key;console.log(后端接口地址,apiUrl);console.log(JWT加密密钥兜底默认值,jwtKey);console.log();}核心技巧变量 || 默认值兜底当配置文件缺失该键时程序不会拿到 undefined 引发加密、接口请求异常。六、示例4 demoParseManual 手动解析env文本functiondemoParseManual(){console.log( 4. dotenv.parse 手动解析文本 );// 模拟一段 .env 格式的文本内容constenvTextCACHE_EXPIRE3600 REDIS_HOST127.0.0.1;// 单独解析文本不注入全局 process.env仅得到普通JS对象constparsedObjdotenv.parse(envText);console.log(手动解析文本得到对象,parsedObj);console.log(缓存过期时间,parsedObj.CACHE_EXPIRE);console.log();}适用场景动态读取远程配置、内存生成配置文本不需要挂载全局时使用仅单独解析键值。七、示例5 demoEnvValidate 必填配置校验生产环境核心functiondemoEnvValidate(){console.log( 5. 环境变量必填校验生产必备 );// 定义项目运行不可缺失的关键配置constrequiredKeys[SERVER_PORT,DB_HOST,API_BASE_URL];letmissing[];for(constkeyofrequiredKeys){// 判断环境变量为空则加入缺失列表if(!process.env[key]){missing.push(key);}}if(missing.length0){console.error(❌ 缺失必填环境变量,missing);// 关键配置缺失直接终止进程不启动残缺服务process.exit(1);}console.log(✅ 所有必填环境变量校验通过);console.log();}线上服务必备逻辑数据库地址、接口域名、加密密钥缺失的情况下服务完全无法正常运行启动时直接校验并退出避免运行中途崩溃。八、统一入口 runAllDemoasyncfunctionrunAllDemo(){// 第一步优先加载所有环境配置后续所有函数才能读取 process.envawaitloadEnvByMode();demoReadBasicEnv();demoDbConfig();demoSecretConfig();demoParseManual();demoEnvValidate();console.log( dotenv 全部功能示例执行完成);}// 捕获全局所有异步异常防止进程闪退runAllDemo().catch(err{console.error(程序异常,err);});执行顺序说明必须先加载环境文件再执行读取配置的逻辑否则process.env拿不到任何自定义变量。整体代码业务价值总结规范多环境管理区分开发/本地/生产三套独立配置敏感密码、密钥不和业务代码硬编码防止代码提交泄露隐私统一封装加载逻辑项目任意模块无需重复写读取.env代码内置配置校验保障线上服务启动完整性支持手动解析文本适配动态配置、远程配置拓展场景兼容鸿蒙PC Node环境纯JS无二进制无需签名直接运行。TS 精简版 envDemo.ts无类型报错importdotenvfromdotenv;importpathfrompath;dotenv.config({path:path.resolve(__dirname,.env)});// 环境变量类型约束interfaceEnvConfig{SERVER_PORT:string;APP_NAME:string;}constenvprocess.envasunknownasEnvConfig;console.log(TS读取端口,env.SERVER_PORT);4. 运行区分开发/生产环境命令开发环境默认nodeenvDemo.js手动指定生产环境# Linux / Mac / 鸿蒙终端NODE_ENVproductionnodeenvDemo.js# Windows cmdsetNODE_ENVproductionnodeenvDemo.js5. 代码核心逻辑讲解多文件分层加载机制按.env → .env.mode → .env.local顺序加载后加载变量覆盖前面本地配置优先级最高不污染公共配置自动注入 process.env所有变量挂载到全局process.env全项目任意文件直接读取手动 parse 方法支持解析字符串格式的env内容适合动态生成配置、读取远程配置文本必填变量校验线上服务启动前校验数据库、密钥等关键配置缺失直接退出避免运行时报错默认值兜底使用process.env.KEY || 默认值防止未定义变量返回undefined引发逻辑崩溃类型手动转换.env中所有值都是字符串数字/布尔需要手动Number()/ 判断 true。6. 鸿蒙PC Node环境说明dotenv 纯JS库无.node二进制模块无需 ohos-signpost 签名直接 node 运行不会出现 permission denied常用于鸿蒙PC端Vite脚本、Node后端服务、打包构建脚本管理环境参数。7. 开发规范.env.local写入本机个性化端口、本地数据库密码不提交仓库密钥、数据库密码严禁写死在代码线上生产环境优先使用服务器系统环境变量优先级高于.env.production提交代码前检查.gitignore禁止上传带真实密码的env文件。
参数)
