在 Vue 中使用 s-s-r 时在哪里调用“Vue.use(plugin)”

Posted 2023-02-22

【中文标题】在 Vue 中使用 s-s-r 时在哪里调用“Vue.use(plugin)”

【英文标题】：Where to call "Vue.use(plugin)" when using s-s-r in Vue

【发布时间】：2018-10-17 10:32:48

【问题描述】：

我有一个插件（bootstrap-vue），我想用Vue.use() 进行初始化。现在，我在客户端条目（router.onReady() 内）中使用它，但收到以下警告：

客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配。这可能是由不正确的 html 标记引起的，例如在 <p> 中嵌套块级元素，或缺少 <tbody>。 Bailing hydration 并执行完整的客户端渲染。

我使用服务器端渲染 (s-s-r)，但不确定在哪里正确调用插件初始化。谢谢！

【问题讨论】：

试图将Vue.use(yourPlugin) 放在您应用的入口点旁边。

谢谢，已经解决了！其他有此问题的人的详细答案如下。

【参考方案1】：

感谢@Sphinx 的提示！答案是将其放入 Vue 应用程序的客户端 (!) 入口点，例如其中new Vue() 被调用：

// Create the main Vue app
const app = new Vue(
    router,
    render: h => h(App)
)

// Register plugins
Vue.use(YourPlugin)

它将与 Vue 应用程序的其他 s-s-r 组件正常工作。