在 Vue3 項目中，可以通過以下 第三方 JavaScript 包 實現漢字轉拼音。這些包均兼容 Vue3，且無需依賴后端處理：

---

推薦方案

1. pinyin-pro

• 特點：功能強大、支持多音字、聲調、拼音匹配、輕量級（~20KB）。
• 安裝：

  npm install pinyin-pro
  # 或
  yarn add pinyin-pro
  

• 代碼示例：

  <template><div>{{ pinyinResult }}</div>
  </template><script setup>
  import { pinyin } from 'pinyin-pro';const text = "你好世界";
  const pinyinResult = pinyin(text, { toneType: 'none' }); // 不帶聲調
  // 輸出: "ni hao shi jie"// 帶聲調
  // const withTone = pinyin(text, { toneType: 'symbol' }); // "nǐ hǎo shì jiè"
  </script>
  

---

2. pinyin

• 特點：老牌庫、支持多音字（需手動處理）、自定義格式。
• 安裝：

  npm install pinyin
  

• 代碼示例：

  <script setup>
  import pinyin from 'pinyin';const text = "重慶火鍋";
  const result = pinyin(text, {style: pinyin.STYLE_NORMAL, // 不帶聲調heteronym: true // 啟用多音字模式
  });
  // 輸出: [ ['chong'], ['qing'], ['huo'], ['guo'] ]
  // 注意：多音字返回數組，需根據上下文選擇
  </script>
  

---

3. tiny-pinyin

• 特點：超輕量（~2KB）、基礎轉換，不支持多音字。
• 安裝：

  npm install tiny-pinyin
  

• 代碼示例：

  <script setup>
  import { pinyin } from 'tiny-pinyin';const text = "漢字轉拼音";
  if (pinyin.isSupported()) {const result = pinyin.convertToPinyin(text, '-', true); // 輸出: "han-zi-zhuan-pin-yin"
  }
  </script>
  

---

關鍵選擇建議

庫名	多音字支持	聲調	體積	適用場景
pinyin-pro	?	?	20KB	復雜需求、多音字處理
pinyin	?（需手動）	?	100KB	需要高度自定義
tiny-pinyin	?	?	2KB	輕量級、基礎轉換

---

注意事項

1. 多音字問題：

   • 如“重慶”中的“重”可能是 chong 或 zhong，前端庫通常無法自動判斷，需結合業務邏輯或后端輔助。
   • pinyin-pro 提供 match 方法處理簡單多音詞：

     import { match } from 'pinyin-pro';
     match('行長', 'hang zhang'); // 返回匹配結果
     

2. 性能優化：

   • 處理長文本時，建議在 Web Worker 中運行拼音轉換，避免阻塞主線程。

3. 國際化：

   • 若需拼音首字母（如搜索建議），可直接截取拼音首字符：

     const initials = pinyin(text).map(p => p[0]).join('');
     // "你好" → "NH"
     

---

總結

• 推薦 pinyin-pro：功能全面，適合大多數場景。
• 若追求極簡，選擇 tiny-pinyin。
• 需要處理多音字但接受手動控制的場景，使用 pinyin。