Q: vue项目引入@waline/client报错

[elainecyx]

按照官方文档提供的方式引入：

 npm i -D @waline/client

<template>
<Waline :serverURL="serverURL" :path="path" />
</template>
<script setup>
import { Waline } from '@waline/client/component';
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const serverURL = 'https://waline.vercel.app';
const path = computed(() => useRoute().path);
</script>

有报错，报错信息如下：
This dependency was not found:

• @waline/client/component in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/userManagement/user/userList.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save @waline/client/component

依赖的版本号：
"@waline/client": "^2.15.0"
"vue": "2.6.10"

[lizheming]

@waline/client 基于 Vue3 开发的，不支持组件形式 Vue2 引入。

[elainecyx]

不好意思，我这边正常了，serverURL格式写错了，感谢两位大神的帮忙！我再引入到nuxtjs看下情况。

[Mister-Hope]

DOUBLE CHECK HOW YOU GET: http:127.0.0.1:8360 if this is set by yourself, this should be 127.0.0.1:8360 or http://127.0.0.1:8360

[elainecyx]

在nuxtjs以同样的方式引入依赖 import { init } from '@waline/client/full';会出现报错，目前是在client端在mounted中初始化waline
报错信息如下：
`Failed to compile with 1 errors friendly-errors 14:56:00

This dependency was not found: friendly-errors 14:56:00
friendly-errors 14:56:00

• @waline/client/full in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/string-replace-loader??ref--12!./pages/acg/detail/_id.vue?vue&type=script&lang=js&
  friendly-errors 14:56:00
  To install it, you can run: npm install --save @waline/client/full `

[elainecyx]

nuxtjs已解决！
分享给大家解决方案：
nuxt.config.js在head声明以下内容：

head: {
    link: [
      { rel: 'stylesheet', href: 'https://unpkg.com/@waline/client@v2/dist/waline.css' }
    ],
    script: [
      {
        src: 'https://unpkg.com/@waline/client@v2/dist/waline.js',
        type: 'text/javascript',
        pbody: true,
        defer: true
      }
    ]
  }

在xxx.vue页面中
<template><div id="waline" /></template>

在mounted生命周期

const params = new URLSearchParams(location.search.slice(1))
  /* eslint-disable-next-line no-undef */
  return Waline.init({
    el: '#waline',
    path: params.get('path') || '/',
    lang: params.get('lng'),
    serverURL: 'your server url'
  })

[Apcin]

@elainecyx 你好可以问你一下有关项目的问题吗

---

@elainecyx Hello, can I ask you a question about the project?