Vue3集成RDKit.js：从项目搭建到分子查看器开发全攻略

原文地址: https://88box.top 生成时间: 2026-05-20 09:38:15

---

RDKit.js + Vue3快速上手 - hey99 知识搜索引擎

精选文章

RDKit.js + Vue3快速上手

本文介绍了在Vue3项目中集成RDKit.js化学工具库的完整流程。主要内容包括：1) 通过Vite创建项目并配置WASM加载；2) 封装RDKit工具类实现全局复用；3) 开发分子查看器组件，支持SMILES输入、分子结构渲染、理化性质计算和子结构匹配功能；4) 强调RDKit的内存管理要点，包括分子对象的创建销毁机制。该方案为化学信息学Web应用开发提供了可复用的技术框架，特别适合药物发现和化学教育领域的可视化需求。

更新于 2026-05-20 01:17

前端

javascript

开发语言

ecmascript

一、环境准备

1. 创建 / 进入 Vue3 项目

npm create vite@latest my-vue-rdkit -- --template vue

cd my-vue-rdkit

npm install

1. 安装 RDKit.js

npm install @rdkit/rdkit

1. 关键配置（Vite 必须）

修改

vite.config.js

，优化 WASM 加载：

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

export default defineConfig({

plugins: [vue()],

optimizeDeps: {

exclude: ['@rdkit/rdkit'] // 跳过预构建，避免 WASM 报错

},

server: {

headers: {

'Cross-Origin-Opener-Policy': 'same-origin',

'Cross-Origin-Embedder-Policy': 'require-corp'

}

}

})

二、封装 RDKit 工具类（推荐）

新建

src/utils/rdkit.js

，全局复用，避免重复初始化：

import initRDKit from '@rdkit/rdkit';

let RDKit = null;

// 初始化 RDKit（全局只执行一次）

export async function initRDKitKit() {

if (RDKit) return RDKit;

RDKit = await initRDKit();

console.log('RDKit 加载成功:', RDKit.version());

return RDKit;

}

// 获取 RDKit 实例

export function getRDKit() {

if (!RDKit) throw new Error('请先调用 initRDKitKit()');

return RDKit;

}

三、Vue 组件完整示例（直接用）

创建

src/components/MoleculeViewer.vue

：

四、在 App.vue 中使用

五、运行项目

npm run dev

打开浏览器即可看到：

SMILES 输入与分子实时渲染

分子量、LogP、TPSA 自动计算

子结构搜索 + 高亮匹配

六、RDKit.js + Vue 核心知识点

1. 生命周期注意事项

onMounted

：初始化 RDKit（WASM 异步加载）

onUnmounted

：必须销毁分子对象

mol.delete()

避免在

setup

顶层直接调用 RDKit

1. 常用 API 速查

javascript

运行

// 创建分子

const mol = RDKit.get_mol('SMILES');

// SVG 渲染

mol.get_svg(宽度, 高度);

mol.get_svg_with_highlights(高亮配置);

// 理化性质

mol.get_descriptors();

// 子结构

const qmol = RDKit.get_qmol('SMARTS');

mol.get_substruct_match(qmol);

// 格式转换

mol.get_molblock();

mol.get_inchikey();

1. 内存管理（非常重要）

每次创建

get_mol()

/

get_qmol()

必须调用

.delete()

切换分子前先销毁旧分子

组件销毁时清理所有分子对象

查看原文

---

🏷 标签: RDKit.js, Vue3, WebAssembly, 化学信息学, 前端可视化