至于前言，当“多模态”遇上“前端工程化”

大模型时代。多模态能力让AI不仅能“看懂”图像，还能“理解”文字指令并生成全新的图片。作为前端开发者，我们经常需要在项目里调用LLM接口。例如通义万相这类生图模型。但一个棘手的问题始终存在：

API密钥怎么安全地放在前端项目里？

直接写死在fetch或axios里肯定不行——一旦代码提交到公开仓库，密钥瞬间泄露。有没有一种既能在开发时方便调用，又不会暴露密钥的方法？答案是的观点是，Vite + .env。

一、为什么选择Vite？——现代前端工程化的“大管家”

Pain Point：传统工具如Webpack配置繁琐。启动慢，热更新卡顿，按理说，而且环境变量管理不够直观。

Vite是一个极速的建立工具，它基于原生ESM提供秒级启动和热更新体验。Vite内置了对.env环境变量的支持，解决问题密钥硬编码问题。

二、项目初始化：从零搭建 Vite + 多模态应用

. 创建 Vite 项目

从打开终端执行来看，

npm init vite@latest qwen-image-demo -- --template vanilla && cd qwen-image-demo && npm install

. 配置 .env.local 文件——将密钥藏进“保险箱”

*请勿将此文件推送至 Git！*

# .env.local
VITE_QWEN_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
# 必须以 VITE_ 开头才能被 import.meta.env 注入到客户端
# .env.local 通常会被 .gitignore 忽略。从而保证密钥不上传到仓库

. 编写 HTML 与 JS

*以下代码已做详细注释，可直接拷贝使用**

<!-- type="module" 启用 ESM 模式，Vite 会接管该模块 -->


// main.js
// ---------------------------
// 环境变量读取
const apiKey = import.meta.env.VITE_QWEN_API_KEY;// ---------------------------
// DOM 根节点获取
const root = document.querySelector;// ---------------------------
// 调用通义万相多模态生成接口
async function generateImage {
const payload = {
至于model。"qwen-image--pro",input: {
messages:
}
]
},parameters: { n: 1,size: "*" } // * 为竖屏尺寸，可改为 * 或 * 等其它尺寸代号
};try {
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}`
},body这方面，JSON.stringify
}
);if throw new Error;话说回来，const data = await res.json;// 根据官方返回结构取出图片 URL
const imgUrl =
data?.output，.choices?.，.message?.content，.?.image，if throw new Error;return imgUrl;} catch {
console.error;老实说，throw err;}
}
// ---------------------------
// 渲染图片到页面并简单错误提示/加载状态展示
function renderImage {
root.innerHTML = ``;}
function showLoading {
root.innerHTML = '

⏳ AI 正在努力作画…⏳<\/span>
';}
function showError {
root.innerHTML = `

${msg}
`;}
// ---------------------------
// 主流程入口
=> {
try {
showLoading;按理说，const url = await generateImage;renderImage，} catch {
showError;}
})，

三、代码详细说明

. 多模态请求的奥秘 — 图文混合输入到底怎么工作？其实，


{ image }: 可公开访问图片 URL 或 Base64 字符串。

{ text }: 自然语言指令，是模型对齐的关键依据。

Pain Point：若图片 URL 无法公开访问或跨域，会导致请求失败；建议托管在可跨域访问的网站上。

Pain Point：文本指令长度受限。过长会被截断导致效果偏差，需要文档精确控制长度。

Pain Point：不同模型对输入顺序敏感。要严格保持参考图与文本指令顺序一致，否则结果可能无法预期。

Pain Point：如果只传单张图片但想加文字描述。需要确保文本能够补足上下文，否则模型可能忽略某些细节。

Pain Point：同一张图片不同视角或光照条件会极大影响合成效果，需要提前做好预处理。

Pain Point：模型返回结果格式变化快，一旦接口升级需及时调整解析逻辑。
.

Pain Point：大量并发请求时可能触发速率限制，需要考虑后端代理或限流策略。

.

Pain Point：对于商业场景。需要评估版权风险，例如上传第三方素材可能涉及侵权问题。
.

Pain Point：如果想要批量生成多张图片。可以将参数 "n"=5，但注意成本和速率限制。


*Tips的观点是，* 在本示例中我们一次性传递三张参考图+一句完整指令；实际业务可根据需求拆分成多轮对话，每轮只传一张图片+一句简短指令。以降低 token 消耗并提高质量控制。**

.


. fetch 调用细节 — 如何避免常见错误？



 Status Code Check: if throw new Error;不过，Pain point: 不检查状态码会把失败信息误认为成功返回 JSON。从而导致后续解析报错，




 CORS Policy:
由于是跨域请求，请求头必须符合目标服务器 CORS 配置；若未开启跨域，将得到网络错误。Pain point: 很多人忽略了 CORS 限制。只是把错误信息打印到控制台，却没有想到真正原因是浏览器拦截；



 Error Message Extraction: if {const err=await res.json;throw new Error;}
Pain point: API 返回自定义错误码时如果只捕获 HTTP 状态码，会漏掉更详细的信息；



 BLOB vs JSON:  if .includes){…}
Pain point: 有些接口同时支持二进制流和 JSON 输出，需要根据业务判断正确的数据类型；


. ESM 模块化与 Vite 热更新 — 开发体验改善 



A. # 导入方式简洁：- 在 Vite 中可直接使用 import/export 而无需打包工具包装。
.
js
Pain point: 对 ES6 模块不熟悉的新手往往担心浏览器兼容性。但现代主流浏览器已完全支持 ESM，无需 polyfill。


⚠️ 注意：

任何放在前端的密钥理论上都无法做到百分之百安全，因为使用者可以通过开发者工具看到网络请求中的 Authorization 标头。但使用 `.env` 至少能避免密钥被硬编码提交到 Git 仓库，从而降低泄露风险。在高安全场景下推荐通过后端代理来隐藏真实 Key。

. 密钥安全实践 — 从开发到生产无缝切换 



 .env.local 加载：import.meta.env.VITE_QWEN_API_KEY 自动注入，只在本地有效；别忘记添加至 .gitignore！Pain point: 开发者常因疏忽将 .env 文件推送至 GitHub 上造成泄漏。



** 

⚡️ 实际演示

bash 

npm init vite@latest qwen-image-demo -- --template vanilla && cd qwen-image-demo && npm install && npm run dev


打开浏览器 http://localhost:/ 就可以看到自动渲染出的第一张 AI 合成图。


四、运行与测试



填写 .env.local中自己的通义千问 API Key。




• 确认node>=16,npm>=7.
• 确保网络可连通阿里云 DashScope 接口。• 若出现 CORS 报错，请检查是否开启了 “允许所有来源”。
`





五、
与调整建议

. 添加使用者交互

html 

生成图片


javascript // 在 main.js 中添加事件监听：
document.getElementById.addEventListener => { /* ... */ });

. 处理加载状态

javascript root.innerHTML='

AI 正在努力作画…⏳<\/div>'，


. 错误处理更友好

javascript if { const err=await res.json;throw new Error;}


. 支持多种尺寸

javascript parameters:{ size:'*' /* 正方形 */。width:'512',height:'768'} // 按需修改即可。




- 用 Vite 搭建轻量级前端框架，实现快速热更新和 ES 模块支持；✔️  

✔️  




- 利用.env.local与 import.meta.env 实现 API Key 的安全管理，并通过 Gitignore 防止泄漏；✔️  ，

'
✔️  

 `

- 构造符合通义万相要求的多模态 JSON 请求，实现图文混合输入和定制化输出；按理说，✔️  
'
✔️  
'
`

- fetch 调用细节、CORS 策略还有响应结构，以免因细节失误导致功能失效；✔️  ，怎么说呢，
'`
✔️  
'
`

- 探索使用者交互
思路。如动态上传参考图、实时输入提示等，为产品帮助；✔️  ，
'`
✔️  老实说，
'
`` ***



Take‑away: 前端即使面对强大的 AI 服务。也能通过 Vite 的现代化工程流程保持代码整洁、安全，并快速迭代产出高质量、多模态视觉体验。老实说，

现在就尝试创建自己的智能图像应用吧。让 AI 成为你创意流程中的得力助手！


                        

                        

                         

                    
                    

                        

                            标签：  
                            密钥  
                        
                    
                    

                    
                    

                        

                            

                                 上一篇： 
                                MCP一键打造全功能CRUD页面。  
                            
                            

                                 下一篇： 
                                如何用Canvas实现RGB偏移和像素排序？