当下 AI 生图、多模态图文生成应用越来越普遍，很多前端同学会尝试直接在项目中对接大模型接口。这篇文章以Vite 原生 JS 项目为例，完整实现对接通义千问图文生成接口。同时解决API Key 安全存储、浏览器跨域、异常容错等实战问题，从环境配置到代码落地一步步讲解，适合前端入门对接 AI 接口的开发者参考。

一、项目整体架构说明

本次项目基于 Vite 搭建纯前端项目。主要能力：

1. 使用 Vite 环境变量管理 AI 接口密钥，避免明文硬编码；
2. 接口；
3. 接收接口返回的图片链接，前端渲染展示生成结果；
4. 针对性解决浏览器跨域、代码报错、密钥泄露等常见问题。

再看项目技术栈，Vite + 原生 JavaScript + Fetch + 通义千问开放网站接口

二、项目初始化与目录结构

. Vite 项目创建

使用 Vite 官方脚手架快速创建原生 JS 项目：

npm init vite
# 按照指引选择 Vanilla。完成项目初始化

最终基础目录结构：

qwen-image-demo/
├── .env.local # 本地环境变量
├── .gitignore # 忽略敏感文件配置
├── index.html # 项目入口页面
├── package.json
└── src/
└── main.js # 主要业务逻辑、接口请求代码

. 入口页面 index.html

Vite 原生项目默认入口，无需额外改造，代码如下：

三、Vite 环境变量：安全存储 API Key

. 为什么不能明文写密钥？

If you directly put your AI platform's API key in JavaScript,after building project it will be fully exposed in front‑end source code。making it easy for ors to steal and cause account usage charges. Therefore environment variables are required.

. .env.local 配置规则

• The local private configuration should be written in .env.local,which is only local and will not be committed by default.
• Your custom variable must start with VITE_;说起来，orwise Vite cannot recognize it.
• The format is ;no spaces around equals sign.
• Create a new file at root named .env.local,n write your Qwen API key:

VITE_QWEN_API_KEY=你的通义千问API_KEY

. 环境变量读取方式

You can read environment variables using Vite's special syntax:

const apiKey = import.meta.env.VITE_QWEN_API_KEY;console.log，

. 配置忽略文件

Add rules to ignore .env files so y never get committed accidentally:

# Ignore all env files
.env*
.env.local*
.env.development.local*
.env.production.local*
# Add any or patterns as needed

四、主要业务代码：对接通义千问多模态生图接口

This part demonstrates how to combine multiple reference images and a textual instruction into one request while handling loading state。error catching,and field fallback to make your code robust.

// Read API key from environment variables
const apiKey = import.meta.env.VITE_QWEN_API_KEY;// Get container element
const root = document.querySelector;其实，// Show loading message initially
root.innerHTML = '

正在生成图片。请稍候...
';/**
* Call Qwen multimodal image generation endpoint
* @returns {Promise} Image URL or null on failure
*/
const generateImage = async => {
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({
"model": "qwen-image--pro","input": {
"messages":
}
]
},// Parameters can be customized
// For demo we set n=1
// size can be set to specific resolution if needed
// e.g.,size: {"width":"1024","height":"1024"}
// Here we keep it flexible
})
}
);
 if throw new Error;const data = await res.json;console.log，// Fallback logic – find first image item safely
const imageItem =
data?.output，按理说，.choices?.，话说回来，.message?
.content，.find;if throw new Error;return imageItem.image;} catch {
console.error;其实，root.innerHTML =
'

' +
至于`生成失败。${err.message}` +
'
';return null，}


};

/**
* Render generated image into page
* @param {string} imageUrl Image URL returned from API
*/
const renderImage = => {
if return;root.innerHTML = 

<,img src="${imageUrl}" alt="AI generated image"
style="max-width:100%;按理说，height:auto;" />

;}，

// Entry point of application
const main = async => {
const imgURL = await generateImage;renderImage，};

main;/**
* User Pain Points addressed:
* - API Key leakage – store key in .env.local and ignore via .gitignore.
* - CORS errors – handled by proxy or backend relay .
* - Unexpected response shape – try/catch and safe navigation prevent UI crashes.
* - Loading feedback – simple loading message before rendering result.
*/

代码逻辑解析 



环境变量读取：从 import.meta.env 中获取密钥，并拼接至 Authorization 头部。

Fetch 请求：SEND POST 请求到 Qwen 的多模态生成接口。

多模态入参：messages 数组可同时包含多张图片和文本描述，实现复杂场景生成。

Error handling：try/catch 捕获网络错误或字段缺失，并给出友好提示。

A/B 渲染：renderImage 将得到的 URL 插入 DOM，并包装成可开始下载链接。

User pain point: 前端直接暴露 API Key 与跨域限制是最常见且痛苦的问题，这段代码正好解决了它们。

User pain point: 接口返回结构不确定时往往导致页面崩溃。我们用安全导航和 fallback 防止此类情况。

User pain point: 开发期间需要即时看到加载状态并调试错误，上述实现满足此需求。