前言当“多模态”遇上“前端工程化”大模型时代多模态能力让AI不仅能“看懂”图像还能“理解”文字指令并生成全新的图片。作为前端开发者我们经常需要在项目里调用LLM接口例如通义万相qwen-image这类生图模型。但一个棘手的问题始终存在API密钥怎么安全地放在前端项目里直接写死在fetch或axios里肯定不行——一旦代码提交到公开仓库密钥瞬间泄露。有没有一种既能在开发时方便调用又不会暴露密钥的解决方案答案是Vite .env。本文将带你从零搭建一个基于Vite的前端项目使用通义千问图像生成模型通过多模态输入参考图文字指令生成高质量图片并借助import.meta.env安全管理API密钥。一、为什么选择Vite—— 现代前端工程化的“大管家”Vite是一个极速的构建工具它基于原生ESMES Modules提供秒级启动的热更新体验。更重要的是Vite内置了对.env环境变量的支持完美解决密钥硬编码问题。ESM是什么浏览器原生支持的模块化规范使用script typemodule引入JS文件告别webpack复杂的配置。Vite正是利用这一特性让开发效率直线飙升。在传统的HTMLJS项目中我们如果直接写script srcmain.js就无法在JS里使用import语法更无法读取环境变量。而Vite通过开发服务器将所有资源统一管理让前端代码也能享受后端般的环境配置。二、项目初始化从零搭建Vite 多模态应用1. 创建Vite项目打开终端执行以下命令npm init vitelatest qwen-image-demo -- --template vanilla cd qwen-image-demo npm install这里选择vanilla模板原生JS方便理解核心逻辑。你也可以选vue或react原理完全一样。2. 配置.env文件——将密钥藏进“保险箱”在项目根目录创建.env.local文件注意不要提交到GitVITE_QWEN_API_KEYsk-xxxxxxxxxxxxxxxxxxxxxxxx关键规则必须以VITE_开头Vite才会将这个变量暴露给客户端代码。.env.local会被Vite自动加载并且通常被.gitignore忽略保证密钥不会上传。然后在main.js中读取const apiKey import.meta.env.VITE_QWEN_API_KEY; console.log(apiKey); // 输出你设置的密钥仅在开发环境可见import.meta.env是Vite注入的全局对象类似于Node.js的process.env。由于Vite启动时会将.env内容替换到代码中最终打包产物里只包含真正用到的变量且构建时可以进一步做混淆或警告。3. 编写HTML与JS修改index.htmlVite默认以此入口!doctype html html langen head meta charsetUTF-8 / link relicon typeimage/svgxml href/favicon.svg / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleqwen-image-demo/title /head body div idapp/div !-- 注意typemodule 启用ESM模式Vite会接管该模块 -- script typemodule src/src/main.js/script /body /html创建src/main.js完整代码如下带详细注释// 读取环境变量中的API密钥 const apiKey import.meta.env.VITE_QWEN_API_KEY; const root document.querySelector(#app); // 调用通义万相生图接口 const generateImage async () { const res await fetch( https://dashscope.aliyuncs.com/api/v1/services/aigc/multimodal-generation/generation, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${apiKey}, }, // 请求体必须序列化为JSON字符串 body: JSON.stringify({ model: qwen-image-2.0-pro, input: { messages: [ { role: user, content: [ { // 第一张参考图人物照片 image: https://help-static-aliyun-doc.aliyuncs.com/file-manage-files/zh-CN/20250925/thtclx/input1.png }, { // 第二张参考图黑色裙子 image: https://help-static-aliyun-doc.aliyuncs.com/file-manage-files/zh-CN/20250925/iclsnx/input2.png }, { // 第三张参考图坐姿动作 image: https://help-static-aliyun-doc.aliyuncs.com/file-manage-files/zh-CN/20250925/gborgw/input3.png }, { // 文字指令融合以上三张图的信息 text: 图1的女生穿着图2中的黑色裙子按图3的姿势坐下 } ] } ] }, parameters: { n: 1, // 生成1张图片 size: 1024*1536 // 竖屏尺寸 } }) } ); const data await res.json(); console.log(data); // 解析返回结果中的图片URL const imgUrl data.output?.choices?.[0]?.message.content[0].image; return imgUrl; }; // 将图片渲染到页面 const renderImage (imageUrl) { root.innerHTML img src${imageUrl} stylemax-width:100%; border-radius:12px; /; }; // 主流程 const main async () { try { const imageUrl await generateImage(); if (imageUrl) { renderImage(imageUrl); } else { root.innerText 生成失败请检查控制台错误; } } catch (error) { console.error(error); root.innerText 请求异常 error.message; } }; main();三、代码深度解析1. 多模态请求的奥秘通义万相qwen-image-2.0-pro模型支持图文混合输入。上面的content数组同时包含了三张参考图和一段文字描述模型会根据这些信息“理解”并合成新图像。image字段传入可公开访问的图片URL或Base64编码。text字段自然语言指令比如“图1的女生穿着图2中的黑色裙子按图3的姿势坐下”。这是多模态对齐的关键。举例电商场景中商家想生成“模特穿着新款连衣裙在沙滩上”的图片就可以提供模特图连衣裙图沙滩背景图加上文字指令“图1模特穿上图2裙子站在图3沙滩上”模型就能一键生成。2. fetch调用细节请求地址阿里云DashScope的统一多模态生成端点。认证方式Authorization: Bearer ${apiKey}。请求体JSON.stringify(...)因为HTTP传输的是文本需要将JS对象序列化。响应解析返回结构为data.output.choices[0].message.content[0].image得到生成的图片URL。3. ESM模块化与Vite的热更新由于script typemodulemain.js被视为一个ES模块可以使用import/export语法本例未使用额外导入但可以轻松扩展。Vite开发服务器会监听文件变化并毫秒级热更新修改代码后页面自动刷新开发体验极佳。4. 密钥安全的工程化实践开发阶段Vite读取.env.local中的VITE_QWEN_API_KEY将其注入到import.meta.env。前端代码中写的是变量名实际运行时会被替换为真实密钥。构建阶段运行npm run build时Vite会进行静态分析将import.meta.env.VITE_*替换为具体的字符串值。如果某个VITE_变量未被使用则不会出现在最终产物中。生产部署你需要在生产服务器的环境变量里设置相同名称的变量例如在Netlify/Vercel的配置面板中添加VITE_QWEN_API_KEY这样构建时就能正确注入同时不暴露在代码仓库中。⚠️ 注意任何放在前端的密钥理论上都无法做到100%安全因为用户可以通过开发者工具看到网络请求中的Authorization头。但使用.env至少能避免密钥被硬编码提交到Git仓库降低泄露风险。对于高安全场景建议后端代理请求。四、运行与测试在.env.local中填写你的通义千问API Key可到阿里云百炼平台申请。终端执行npm run dev。浏览器打开http://localhost:5173稍等片刻页面将显示生成的图片。你会看到类似下图的效果实际结果取决于官方示例图片https://fakeimg.pl/600x900?textAIGeneratedImage控制台会打印完整的响应数据便于调试。五、扩展与优化建议1. 添加用户交互你可以增加一个文本输入框和上传图片的功能让用户自定义参考图和指令input typetext idprompt placeholder输入指令 / button idgenerateBtn生成图片/button然后在JS中获取用户输入动态构造content数组。2. 处理加载状态在generateImage执行期间显示加载动画提升体验root.innerHTML div classloadingAI正在努力作画.../div;root.innerHTML div classloadingAI正在努力作画.../div;3. 错误处理更友好检查HTTP状态码和API返回的错误码if (!res.ok) { const err await res.json(); throw new Error(err.message || 请求失败); }4. 支持多种尺寸parameters.size可选值1024*1024正方形、768*1024竖屏、1024*768横屏等。六、总结通过本文你学会了使用Vite创建现代前端项目拥抱ESM原生模块化。通过.env文件安全管理API密钥利用import.meta.env读取避免硬编码泄露。调用通义万相多模态生图接口图文混合输入按指令生成定制化图片。完整的前端工程化思维开发、构建、部署环节中的环境变量处理。多模态能力正在重塑前端开发的边界而Vite这样的工具则让我们能轻量、优雅地集成AI服务。现在就去试试创造属于你自己的智能图像应用吧