Vue3集成Valine和Twikoo

Valine

官网：https://valine.js.org/ Valine 是一个轻量级、功能完善的评论系统，与 Vue 项目集成简单高效，适合个人博客、文档站点等场景使用。

1. 直接引入 CDN（快速集成）

<template>
  <div>
    <h1>文章标题</h1>
    <div class="article-content">文章内容...</div>
    
    <!-- Valine 评论容器 -->
    <div id="vcomments"></div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  // 动态加载 Valine
  const script = document.createElement('script')
  script.src = 'https://cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js'
  script.onload = initValine
  document.head.appendChild(script)
})

function initValine() {
  // 初始化 Valine
  window.valine = new window.Valine({
    el: '#vcomments',
    appId: '你的 LeanCloud App ID', // 替换为你的 App ID
    appKey: '你的 LeanCloud App Key', // 替换为你的 App Key
    placeholder: '说点什么吧...',
    path: window.location.pathname, // 根据当前路径区分不同页面的评论
    avatar: 'mp', // 头像样式
    meta: ['nick', 'mail', 'link'], // 需要填写的信息
    pageSize: 10, // 每页显示条数
    lang: 'zh-CN', // 语言
    highlight: true, // 代码高亮
    recordIP: true // 记录IP
  })
}

onUnmounted(() => {
  // 组件卸载时清理
  if (window.valine) {
    window.valine.destroy()
    delete window.valine
  }
})
</script>

<style scoped>
/* 自定义评论区样式 */
#vcomments {
  margin-top: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}
</style>

2. 使用 npm 安装(推荐)

npm install valine --save

<template>
  <div ref="commentEl"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, defineProps } from 'vue'
import Valine from 'valine'

const props = defineProps({
  appId: {
    type: String,
    default: () => import.meta.env.VITE_VALINE_APP_ID
  },
  appKey: {
    type: String,
    default: () => import.meta.env.VITE_VALINE_APP_KEY
  },
  // 路径
  path: {
    type: String,
    default: () => location.hash
  },
  placeholder: {
    type: String,
    default: '请输入评论内容...'
  }
})

const commentEl = ref(null)
let valineInstance:any = null

onMounted(() => {
  if (!props.appId || !props.appKey) {
    console.error('Valine 初始化失败：缺少 appId 或 appKey')
    return
  }
  
  valineInstance = new Valine({
    el: commentEl.value,
    appId: props.appId,
    appKey: props.appKey,
    path: props.path,
    placeholder: props.placeholder,
    visitor: true,//开启游客统计
    avatar: 'retro', // 显示头像
    requiredFields: ['nick', 'mail'], // 必填项
    login: true,
    enableQQ: true, // 支持QQ快捷登录
    serverURLs:import.meta.env.VITE_VALINE_SERVER_URL //重要
  })
})

onUnmounted(() => {
  if (valineInstance) {
    valineInstance.destroy()
  }
})
</script>

实现思路解析

• 前置准备：
  • 首先需要在 LeanCloud 注册账号并创建应用
  • 获取应用的 App ID 和 App Key
  • 在 LeanCloud 中配置安全域名，允许你的网站访问
• 核心配置说明：
  • el: 指定评论容器的 DOM 元素
  • appId 和 appKey: LeanCloud 应用的凭证
  • path: 用于区分不同页面的评论数据
  • visitor: 是否开启阅读量统计功能
  • meta: 设置需要用户填写的信息项
• Vue 生命周期处理：
  • 在 onMounted 钩子中初始化 Valine
  • 在 onUnmounted 钩子中销毁实例，避免内存泄漏

Twikoo

官网：https://twikoo.js.org/ Twikoo 是一个高性能、功能丰富的评论系统，与 Vue 3 项目集成简单，适合个人博客、文档站点等场景使用。

1. 直接引入 CDN（快速集成）

<template>
  <div>
    <h1>文章标题</h1>
    <div class="content">文章内容...</div>
    
    <!-- Twikoo 评论容器 -->
    <div id="tcomment"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  // 动态加载 Twikoo
  const script = document.createElement('script')
  script.src = 'https://cdn.staticfile.org/twikoo/1.6.30/twikoo.all.min.js'
  script.onload = initTwikoo
  document.head.appendChild(script)
})

function initTwikoo() {
  // 初始化 Twikoo
  window.twikoo.init({
    el: '#tcomment',
    envId: '你的环境ID', // 腾讯云开发环境ID或Vercel URL
    region: 'ap-guangzhou', // 环境地域，如 ap-guangzhou
    path: window.location.pathname, // 当前页面路径，用于区分不同页面的评论
    // 其他配置
    placeholder: '畅所欲言吧~',
    avatarCDN: 'https://cdn.jsdelivr.net/gh/Dreamacro/clash@master/docs/logo.png', // 默认头像
    lang: 'zh-CN', // 语言
  })
}
</script>

<style scoped>
#tcomment {
  margin-top: 30px;
  padding: 20px;
}
</style>

2. npm 安装（推荐）

npm install twikoo --save

• Vue 组件实现：

<!-- components/TwikooComment.vue -->
<template>
  <div ref="twikooEl"></div>
</template>

<script setup>
import { ref, onMounted, defineProps, watch } from 'vue'
import twikoo from 'twikoo'

const props = defineProps({
  envId: {
    type: String,
    required: true
  },
  region: {
    type: String,
    default: 'ap-guangzhou'
  },
  path: {
    type: String,
    required: true
  },
  placeholder: {
    type: String,
    default: '写下你的评论...'
  }
})

const twikooEl = ref(null)

// 初始化函数
const initTwikoo = async () => {
  if (!twikooEl.value) return
  
  try {
    await twikoo.init({
      el: twikooEl.value,
      envId: props.envId,
      region: props.region,
      path: props.path,
      placeholder: props.placeholder,
      // 其他配置
    })
  } catch (err) {
    console.error('Twikoo 初始化错误:', err)
  }
}

// 监听path变化，重新加载评论
watch(() => props.path, () => {
  initTwikoo()
})

onMounted(() => {
  initTwikoo()
})
</script>

实现思路解析

• 前置准备：
  • 首先需要部署 Twikoo 环境（支持腾讯云开发、Vercel、云函数等方式）
  • 获取部署后的 环境 ID 和 地域信息
  • 部署教程参考：Twikoo 官方文档
• 核心配置说明：
  • el: 指定评论容器的 DOM 元素
  • envId: Twikoo 部署环境的标识（腾讯云开发环境 ID 或 Vercel URL）
  • region: 环境地域（如 ap-guangzhou、ap-shanghai）
  • path: 用于区分不同页面的评论数据
• Vue 生命周期处理
  • 在 onMounted 钩子中初始化 Twikoo（需等待 DOM 渲染完成）
  • 使用 async/await 处理初始化的异步过程
  • 添加错误捕获，避免初始化失败影响页面