Compare commits

..

8 Commits

Author SHA1 Message Date
zhangshun
91ae484b36 修改模型树相关配置 2026-07-11 13:41:11 +08:00
zhangshun
0673de9ebe 修正模型库子路径构建配置 2026-07-10 13:34:03 +08:00
zhangshun
15d2bc51ca 上传模型时自动生成预览图 2026-07-08 18:38:48 +08:00
zhangshun
0665d7a008 上传模型时显示全屏进度 2026-07-08 18:27:51 +08:00
zhangshun
025835c5b3 优化批量上传模型提示 2026-07-08 18:18:11 +08:00
zhangshun
a3e7d93872 支持批量导入模型 2026-07-08 18:03:24 +08:00
zhangshun
e2e7aa5f06 增加前端运行时后端地址配置 2026-06-02 13:32:08 +08:00
zhangshun
8fb45bd42a 生产构建跳过本地开发证书 2026-06-02 11:46:55 +08:00
10 changed files with 507 additions and 60 deletions

View File

@@ -7,6 +7,7 @@
</head>
<body>
<div id="app"></div>
<script src="%BASE_URL%model-library-config.js"></script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

View File

@@ -0,0 +1,9 @@
window.__DMT_MODEL_LIBRARY_CONFIG__ = {
// 后端服务根地址。为空时使用当前页面域名,例如 /api/models。
// 示例:"https://model-api.example.com"
API_BASE_URL: "https://dmt.meswork.com/modelLibrary",
// 模型文件和缩略图服务根地址。为空时优先复用 API_BASE_URL。
// 示例:"https://model-api.example.com"
STORAGE_BASE_URL: "https://dmt.meswork.com"
};

52
web/src/config/runtime.ts Normal file
View File

@@ -0,0 +1,52 @@
type RuntimeConfig = {
API_BASE_URL?: string;
STORAGE_BASE_URL?: string;
};
declare global {
interface Window {
__DMT_MODEL_LIBRARY_CONFIG__?: RuntimeConfig;
}
}
function runtimeConfig() {
return window.__DMT_MODEL_LIBRARY_CONFIG__ ?? {};
}
function cleanBaseUrl(value?: string) {
return value?.trim().replace(/\/+$/g, "") ?? "";
}
function isAbsoluteUrl(url: string) {
return /^https?:\/\//i.test(url);
}
function joinUrl(baseUrl: string, path: string) {
if (!baseUrl || isAbsoluteUrl(path)) return path;
return `${baseUrl}${path.startsWith("/") ? "" : "/"}${path}`;
}
function joinApiUrl(baseUrl: string, path: string) {
if (!baseUrl || isAbsoluteUrl(path)) return path;
try {
const base = new URL(baseUrl);
if (base.pathname.replace(/\/+$/g, "") === "/api" && path.startsWith("/api/")) {
return joinUrl(baseUrl, path.slice(4));
}
} catch {
// 非完整 URL 时按普通路径拼接。
}
return joinUrl(baseUrl, path);
}
export function resolveApiUrl(path: string) {
return joinApiUrl(cleanBaseUrl(runtimeConfig().API_BASE_URL), path);
}
export function resolveStorageUrl(path: string) {
const storageBaseUrl = cleanBaseUrl(runtimeConfig().STORAGE_BASE_URL);
const apiBaseUrl = cleanBaseUrl(runtimeConfig().API_BASE_URL);
return joinUrl(storageBaseUrl || apiBaseUrl, path);
}

View File

@@ -64,6 +64,105 @@
color: #405469;
}
.selected-file-summary {
display: block;
color: #1f6f8b;
font-weight: 600;
}
.selected-file-list {
display: block;
max-height: 58px;
overflow: auto;
color: #405469;
line-height: 1.45;
word-break: break-all;
}
.upload-status {
padding: 8px 10px;
border: 1px solid #b9d7c1;
border-radius: 6px;
background: #eef8f1;
color: #27613a;
font-size: 13px;
line-height: 1.45;
word-break: break-all;
}
.upload-popup-form.is-uploading .drop-zone {
cursor: progress;
opacity: 0.72;
}
.upload-progress-overlay {
position: fixed;
inset: 0;
z-index: 100000;
display: grid;
place-items: center;
padding: 24px;
background: rgba(15, 23, 42, 0.58);
}
.upload-progress-overlay[hidden] {
display: none;
}
.upload-progress-panel {
width: min(460px, 100%);
display: grid;
gap: 12px;
padding: 22px 24px;
border: 1px solid #dbe5ec;
border-radius: 8px;
background: #ffffff;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);
}
.upload-progress-title {
color: #1c2733;
font-size: 18px;
font-weight: 700;
}
.upload-progress-message {
color: #405469;
font-size: 14px;
line-height: 1.5;
word-break: break-all;
}
.upload-progress-track {
height: 10px;
overflow: hidden;
border-radius: 999px;
background: #e8eef3;
}
.upload-progress-bar {
width: 0;
height: 100%;
border-radius: inherit;
background: #1f6f8b;
transition: width 180ms ease;
}
.upload-progress-meta {
color: #27613a;
font-size: 13px;
font-weight: 700;
}
.upload-progress-file {
max-height: 48px;
overflow: auto;
color: #647586;
font-size: 12px;
line-height: 1.4;
word-break: break-all;
}
.upload-target-path {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);

View File

@@ -5,10 +5,14 @@ import type { DictionaryResponse, ModelItem, ModelListResponse } from "../../../
import { confirmDialog, formDialog, notify, notifyError } from "../../../ui/dialogs";
import { downloadFileFromUrl } from "../../../utils/fileDownload";
import { escapeHtml, modelNameFromFile } from "../../../utils/format";
import { resolveStorageUrl } from "../../../config/runtime";
import { appState } from "../appState";
import { generateModelThumbnailFromFile } from "./thumbnail";
type UploadFormState = {
file: File | null;
files: File[];
thumbnailFailures: string[];
};
type UploadModelPayload = {
@@ -22,6 +26,10 @@ type UploadModelPayload = {
properties?: Record<string, string>;
};
type UploadModelResponse = {
id: number;
};
const defaultOperationTree = JSON.stringify({ OperationTree: "[]" });
const requestSceneModelMessageType = "DMT_MODEL_LIBRARY_REQUEST_SCENE_MODEL";
const sceneModelMessageType = "DMT_MODEL_LIBRARY_SCENE_MODEL";
@@ -287,7 +295,7 @@ function renderModelCard(item: ModelItem) {
const canWrite = item.permissions.write;
const prop = item.properties ?? {};
const thumb = item.thumbnail_url
? `<img src="${item.thumbnail_url}" alt="" />`
? `<img src="${resolveStorageUrl(item.thumbnail_url)}" alt="" />`
: `<div class="thumb-placeholder">暂无预览图</div>`;
return `
<article class="model-card" data-model-id="${item.id}">
@@ -468,10 +476,11 @@ export async function uploadModelToBackend(payload: UploadModelPayload) {
form.set(`prop.${key}`, value);
}
await api("/api/models/upload", {
const result = await api<UploadModelResponse>("/api/models/upload", {
method: "POST",
body: form
});
return result.id;
}
async function openUploadModelDialog() {
@@ -480,7 +489,7 @@ async function openUploadModelDialog() {
return;
}
const state: UploadFormState = { file: null };
const state: UploadFormState = { file: null, files: [], thumbnailFailures: [] };
await loadDictionaries();
const result = await formDialog<boolean>({
title: "增加模型",
@@ -492,9 +501,9 @@ async function openUploadModelDialog() {
<label>
<span>模型文件</span>
<div id="modelDropZone" class="drop-zone">
<input id="modelUploadFile" type="file" accept=".glb" />
<input id="modelUploadFile" type="file" accept=".glb" multiple />
<strong>选择模型</strong>
<em>或拖拽 .glb 模型到这里</em>
<em>或拖拽一个或多个 .glb 模型到这里</em>
<small id="selectedFileName">未选择文件</small>
</div>
</label>
@@ -507,35 +516,92 @@ async function openUploadModelDialog() {
<label><span>类型</span><input name="typeName" list="typeOptions" /></label>
<label><span>型号</span><input name="model" /></label>
</div>
<div id="modelUploadStatus" class="upload-status" aria-live="polite" hidden></div>
${dictionaryDatalistHtml()}
</form>
`,
onOpen: () => bindUploadDialogEvents(state),
onSubmit: async () => {
if (!state.file) {
if (state.files.length === 0) {
throw new Error("请选择 .glb 模型文件");
}
const name = document.querySelector<HTMLInputElement>("#modelUploadName")?.value.trim();
if (!name) {
if (state.files.length === 1 && !name) {
throw new Error("模型名称不能为空");
}
const form = new FormData(document.querySelector<HTMLFormElement>("#modelUploadPopupForm")!);
await uploadModelToBackend({
file: state.file,
name,
fileName: state.file.name,
brandName: String(form.get("brandName") ?? ""),
typeName: String(form.get("typeName") ?? ""),
operationTree: defaultOperationTree,
properties: {
model: String(form.get("model") ?? "")
const brandName = String(form.get("brandName") ?? "");
const typeName = String(form.get("typeName") ?? "");
const properties = {
model: String(form.get("model") ?? "")
};
let completedCount = 0;
const totalCount = state.files.length;
setUploadDialogBusy(state, true);
showUploadProgressOverlay(totalCount);
try {
for (const [index, file] of state.files.entries()) {
const uploadingMessage = `正在上传 ${index + 1}/${totalCount}${file.name}`;
updateUploadStatus(uploadingMessage);
updateUploadProgressOverlay({
total: totalCount,
completed: completedCount,
message: uploadingMessage,
fileName: file.name
});
await waitForUploadStatusPaint();
const modelId = await uploadModelToBackend({
file,
name: state.files.length === 1 ? name ?? "" : modelNameFromFile(file.name),
fileName: file.name,
brandName,
typeName,
operationTree: defaultOperationTree,
properties
});
const thumbnailMessage = `正在生成预览图 ${index + 1}/${totalCount}${file.name}`;
updateUploadStatus(thumbnailMessage);
updateUploadProgressOverlay({
total: totalCount,
completed: completedCount,
message: thumbnailMessage,
fileName: file.name
});
await waitForUploadStatusPaint();
try {
await generateAndSaveModelThumbnail(modelId, file);
} catch {
state.thumbnailFailures.push(file.name);
}
completedCount += 1;
const completedMessage = `已完成 ${completedCount}/${totalCount}`;
updateUploadStatus(completedMessage);
updateUploadProgressOverlay({
total: totalCount,
completed: completedCount,
message: completedMessage,
fileName: file.name
});
}
});
} catch (error) {
updateUploadStatus(`上传失败,已完成 ${completedCount}/${totalCount},请处理后重试。`);
throw error;
} finally {
hideUploadProgressOverlay();
if (completedCount < state.files.length) {
setUploadDialogBusy(state, false);
}
}
return true;
}
});
if (result) {
if (state.thumbnailFailures.length > 0) {
notify(`模型上传完成,${state.thumbnailFailures.length} 个预览图生成失败,可稍后在预览窗口手动更新。`);
} else {
notify("模型上传和预览图生成完成");
}
invalidateDictionaries();
await reloadFoldersAndModels();
}
@@ -551,7 +617,7 @@ export async function openProcessModelUploadDialog(input?: {
return;
}
const state: UploadFormState = { file: input?.file ?? null };
const state: UploadFormState = { file: input?.file ?? null, files: input?.file ? [input.file] : [], thumbnailFailures: [] };
await loadDictionaries();
const initialName = input?.modelName || (input?.file ? modelNameFromFile(input.file.name) : "");
const result = await formDialog<boolean>({
@@ -577,7 +643,7 @@ export async function openProcessModelUploadDialog(input?: {
}
const form = new FormData(document.querySelector<HTMLFormElement>("#processModelUploadPopupForm")!);
const name = String(form.get("name") ?? "").trim();
await uploadModelToBackend({
const modelId = await uploadModelToBackend({
file: state.file,
name,
fileName: state.file.name,
@@ -588,6 +654,11 @@ export async function openProcessModelUploadDialog(input?: {
model: String(form.get("model") ?? "")
}
});
try {
await generateAndSaveModelThumbnail(modelId, state.file);
} catch {
notify("模型已上传,预览图生成失败,可稍后在预览窗口手动更新。");
}
return true;
}
});
@@ -604,21 +675,48 @@ function bindUploadDialogEvents(state: UploadFormState) {
const nameInput = document.querySelector<HTMLInputElement>("#modelUploadName")!;
const selectedFileName = document.querySelector<HTMLElement>("#selectedFileName")!;
const selectFile = (file: File) => {
if (!file.name.toLowerCase().endsWith(".glb")) {
const renderSelectedFiles = () => {
if (state.files.length === 0) {
selectedFileName.textContent = "未选择文件";
nameInput.disabled = false;
nameInput.value = "";
nameInput.placeholder = "选择文件后自动填入";
return;
}
if (state.files.length === 1) {
const [file] = state.files;
selectedFileName.textContent = file.name;
nameInput.disabled = false;
nameInput.value = modelNameFromFile(file.name);
nameInput.placeholder = "选择文件后自动填入";
return;
}
selectedFileName.innerHTML = `
<span class="selected-file-summary">已选择 ${state.files.length} 个模型,名称按文件名自动生成</span>
<span class="selected-file-list">${state.files.map((file) => escapeHtml(file.name)).join("<br>")}</span>
`;
nameInput.disabled = true;
nameInput.value = `${state.files.length} 个模型按文件名自动命名`;
nameInput.placeholder = "";
};
const selectFiles = (files: FileList | File[]) => {
const selectedFiles = Array.from(files);
if (selectedFiles.length === 0) return;
const invalidFiles = selectedFiles.filter((file) => !file.name.toLowerCase().endsWith(".glb"));
if (invalidFiles.length > 0) {
notify("当前阶段只允许上传 .glb 模型");
return;
}
state.file = file;
selectedFileName.textContent = file.name;
if (!nameInput.value.trim()) {
nameInput.value = modelNameFromFile(file.name);
}
state.files = selectedFiles;
state.file = selectedFiles[0] ?? null;
renderSelectedFiles();
};
fileInput.addEventListener("change", () => {
const file = fileInput.files?.[0];
if (file) selectFile(file);
if (fileInput.files) selectFiles(fileInput.files);
});
dropZone.addEventListener("click", (event) => {
@@ -635,8 +733,90 @@ function bindUploadDialogEvents(state: UploadFormState) {
dropZone.addEventListener("drop", (event) => {
event.preventDefault();
dropZone.classList.remove("is-dragover");
const file = event.dataTransfer?.files?.[0];
if (file) selectFile(file);
const files = event.dataTransfer?.files;
if (files) selectFiles(files);
});
}
function updateUploadStatus(message: string) {
const status = document.querySelector<HTMLElement>("#modelUploadStatus");
if (!status) return;
status.hidden = false;
status.textContent = message;
}
function waitForUploadStatusPaint() {
return new Promise<void>((resolve) => {
window.requestAnimationFrame(() => window.setTimeout(resolve, 0));
});
}
function showUploadProgressOverlay(total: number) {
let overlay = document.querySelector<HTMLElement>("#modelUploadProgressOverlay");
if (!overlay) {
overlay = document.createElement("div");
overlay.id = "modelUploadProgressOverlay";
overlay.className = "upload-progress-overlay";
overlay.setAttribute("role", "status");
overlay.setAttribute("aria-live", "polite");
overlay.innerHTML = `
<div class="upload-progress-panel">
<div class="upload-progress-title">模型上传中</div>
<div id="modelUploadProgressMessage" class="upload-progress-message">正在准备上传...</div>
<div class="upload-progress-track">
<div id="modelUploadProgressBar" class="upload-progress-bar"></div>
</div>
<div id="modelUploadProgressMeta" class="upload-progress-meta">0/${total}</div>
<div id="modelUploadProgressFile" class="upload-progress-file"></div>
</div>
`;
document.body.appendChild(overlay);
}
overlay.hidden = false;
updateUploadProgressOverlay({
total,
completed: 0,
message: "正在准备上传...",
fileName: ""
});
}
function updateUploadProgressOverlay(options: {
total: number;
completed: number;
message: string;
fileName: string;
}) {
const message = document.querySelector<HTMLElement>("#modelUploadProgressMessage");
const meta = document.querySelector<HTMLElement>("#modelUploadProgressMeta");
const file = document.querySelector<HTMLElement>("#modelUploadProgressFile");
const bar = document.querySelector<HTMLElement>("#modelUploadProgressBar");
const percent = options.total > 0 ? Math.round((options.completed / options.total) * 100) : 0;
if (message) message.textContent = options.message;
if (meta) meta.textContent = `${options.completed}/${options.total}`;
if (file) file.textContent = options.fileName;
if (bar) bar.style.width = `${percent}%`;
}
function hideUploadProgressOverlay() {
const overlay = document.querySelector<HTMLElement>("#modelUploadProgressOverlay");
if (overlay) overlay.hidden = true;
}
async function generateAndSaveModelThumbnail(modelId: number, file: File) {
const thumbnail = await generateModelThumbnailFromFile(file);
await api(`/api/models/${modelId}/thumbnail`, {
method: "PUT",
body: JSON.stringify({ thumbnail })
});
}
function setUploadDialogBusy(state: UploadFormState, busy: boolean) {
const form = document.querySelector<HTMLFormElement>("#modelUploadPopupForm");
if (!form) return;
form.classList.toggle("is-uploading", busy);
form.querySelectorAll<HTMLInputElement>("input").forEach((input) => {
input.disabled = busy || (input.id === "modelUploadName" && state.files.length > 1);
});
}

View File

@@ -9,6 +9,7 @@ import { downloadFileFromUrl } from "../../../utils/fileDownload";
import { escapeHtml, formatBytes } from "../../../utils/format";
import { notify, notifyError } from "../../../ui/dialogs";
import { api } from "../../../services/api";
import { resolveStorageUrl } from "../../../config/runtime";
type PreviewRuntime = {
renderer: WebGLRenderer;
@@ -146,7 +147,7 @@ export function openModelPreview(
) {
const context = beginPreviewContext();
const canWrite = model.permissions.write;
const url = model.file_url;
const url = resolveStorageUrl(model.file_url);
const operations = parseModelOperations(model.operation_tree);
const popup = w2popup.open({
title: `模型预览 - ${escapeHtml(model.name)}${formatBytes(model.file_size)}`,
@@ -300,7 +301,7 @@ function buildParentImportScenePayload(payload: PreviewImportScenePayload): Pare
id: payload.model.id,
name: payload.model.name,
original_filename: payload.model.original_filename,
file_url: payload.model.file_url
file_url: resolveStorageUrl(payload.model.file_url)
},
modelUrl: payload.modelUrl,
basePointEnabled: payload.basePointEnabled,
@@ -739,7 +740,7 @@ function buildImportScenePayload(options: {
}): PreviewImportScenePayload {
return {
model: options.model,
modelUrl: options.model.file_url,
modelUrl: resolveStorageUrl(options.model.file_url),
basePointEnabled: options.basePointEnabled,
basePoint: options.basePoint,
rawOperationTree: options.model.operation_tree,

View File

@@ -0,0 +1,96 @@
import type { Material, Object3D, PerspectiveCamera, Texture } from "three";
import type { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
const THUMBNAIL_WIDTH = 512;
const THUMBNAIL_HEIGHT = 384;
type ThreeModule = typeof import("three");
type LoadedGltf = Awaited<ReturnType<GLTFLoader["loadAsync"]>>;
type ParseableGltfLoader = GLTFLoader & {
parseAsync(data: ArrayBuffer | string, path: string): Promise<LoadedGltf>;
};
export async function generateModelThumbnailFromFile(file: File) {
const [THREE, { GLTFLoader }] = await Promise.all([
import("three"),
import("three/examples/jsm/loaders/GLTFLoader.js")
]);
THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, THUMBNAIL_WIDTH / THUMBNAIL_HEIGHT, 0.01, 1000);
camera.up.set(0, 0, 1);
const renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true,
preserveDrawingBuffer: true
});
renderer.setPixelRatio(1);
renderer.setSize(THUMBNAIL_WIDTH, THUMBNAIL_HEIGHT, false);
renderer.setClearColor(0x000000, 0);
renderer.outputColorSpace = THREE.SRGBColorSpace;
const ambientLight = new THREE.HemisphereLight(0xffffff, 0x9aa8b5, 2.2);
const keyLight = new THREE.DirectionalLight(0xffffff, 2.8);
keyLight.position.set(3, -4, 5);
scene.add(ambientLight, keyLight);
let object: Object3D | null = null;
try {
const buffer = await file.arrayBuffer();
const gltf = await (new GLTFLoader() as ParseableGltfLoader).parseAsync(buffer, "");
if (!gltf.scene) {
throw new Error("模型文件中未找到可渲染场景");
}
object = gltf.scene;
scene.add(object);
fitCameraToObject(THREE, camera, object);
renderer.render(scene, camera);
return renderer.domElement.toDataURL("image/png");
} finally {
if (object) disposeObject3D(object);
renderer.dispose();
renderer.forceContextLoss();
renderer.domElement.remove();
}
}
function fitCameraToObject(THREE: ThreeModule, camera: PerspectiveCamera, object: Object3D) {
const box = new THREE.Box3().setFromObject(object);
const size = box.getSize(new THREE.Vector3());
const center = box.getCenter(new THREE.Vector3());
const maxSize = Math.max(size.x, size.y, size.z) || 1;
const distance = maxSize / (2 * Math.tan((camera.fov * Math.PI) / 360));
camera.position.copy(center).add(new THREE.Vector3(distance * 0.9, -distance * 1.15, distance * 0.65));
camera.near = Math.max(distance / 100, 0.01);
camera.far = distance * 100;
camera.lookAt(center);
camera.updateProjectionMatrix();
}
function disposeObject3D(root: Object3D) {
root.traverse((object) => {
const maybeMesh = object as Object3D & {
geometry?: { dispose?: () => void };
material?: Material | Material[];
};
maybeMesh.geometry?.dispose?.();
const materials = Array.isArray(maybeMesh.material) ? maybeMesh.material : maybeMesh.material ? [maybeMesh.material] : [];
for (const material of materials) {
disposeMaterial(material);
}
});
}
function disposeMaterial(material: Material) {
const values = Object.values(material as Material & Record<string, unknown>);
for (const value of values) {
if (value && typeof value === "object" && "isTexture" in value) {
(value as Texture).dispose();
}
}
material.dispose();
}

View File

@@ -1,4 +1,5 @@
import { getToken } from "./authState";
import { resolveApiUrl } from "../config/runtime";
function authHeaders(): Record<string, string> {
const token = getToken();
@@ -7,7 +8,7 @@ function authHeaders(): Record<string, string> {
export async function api<T>(url: string, options: RequestInit = {}): Promise<T> {
const hasBody = options.body !== undefined && options.body !== null;
const response = await fetch(url, {
const response = await fetch(resolveApiUrl(url), {
...options,
headers: {
...(hasBody && !(options.body instanceof FormData) ? { "Content-Type": "application/json" } : {}),

View File

@@ -1,5 +1,7 @@
import { resolveStorageUrl } from "../config/runtime";
export async function downloadFileFromUrl(fileUrl: string, fileName: string) {
const response = await fetch(fileUrl, {
const response = await fetch(resolveStorageUrl(fileUrl), {
credentials: "include"
});
if (!response.ok) {

View File

@@ -5,30 +5,36 @@ import { fileURLToPath } from "node:url";
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const rootDir = path.resolve(__dirname, "../..");
const httpsConfig = {
key: fs.readFileSync(path.join(rootDir, "certs/localhost+2-key.pem")),
cert: fs.readFileSync(path.join(rootDir, "certs/localhost+2.pem"))
};
export default defineConfig({
server: {
port: 5174,
strictPort: true,
https: httpsConfig,
headers: {
// 关键:添加 COEP 和 COOP
"Cross-Origin-Embedder-Policy": "credentialless", // 或 "require-corp"
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Resource-Policy": "cross-origin", // 改为 cross-origin
// 开发环境允许跨域
"Access-Control-Allow-Origin": "https://localhost:3000", // 父页面的地址
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Credentials": "true"
},
proxy: {
"/api": "http://127.0.0.1:3001",
"/storage": "http://127.0.0.1:3001"
function getDevHttpsConfig() {
return {
key: fs.readFileSync(path.join(rootDir, "certs/localhost+2-key.pem")),
cert: fs.readFileSync(path.join(rootDir, "certs/localhost+2.pem"))
};
}
export default defineConfig(({ command }) => ({
base: command === "build" ? "/modelLibrary/" : "/",
server: command === "serve"
? {
port: 5174,
strictPort: true,
https: getDevHttpsConfig(),
headers: {
// 关键:添加 COEP 和 COOP
"Cross-Origin-Embedder-Policy": "credentialless", // 或 "require-corp"
"Cross-Origin-Opener-Policy": "same-origin",
"Cross-Origin-Resource-Policy": "cross-origin", // 改为 cross-origin
// 开发环境允许跨域
"Access-Control-Allow-Origin": "https://localhost:3000", // 父页面的地址
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type",
"Access-Control-Allow-Credentials": "true"
},
proxy: {
"/api": "http://127.0.0.1:3001",
"/storage": "http://127.0.0.1:3001"
}
}
}
});
: undefined
}));