在 Nuxt.js 的每个页面上调用插件的最佳实践

Question

我创建了一个插件，我想在我的应用程序的任何页面上调用它。我怎样才能做到这一点，而不是在每个页面上创建 mounted 函数并调用该插件？

Answer 1

您可以使用布局 + 中间件的组合。

Layouts 官方文档：https://nuxtjs.org/docs/2.x/concepts/views#layouts

中间件官方文档：https://nuxtjs.org/docs/2.x/directory-structure/middleware/

---

应用范围内的全局中间件在 nuxt.config.js 文件中是可行的

export default {
  router: {
    middleware: ['global'],
  },
}

在middleware/global.js 中使用global 文件。

---

根据您创建插件的方式，您也可以简单地在全局范围内注册它

// plugins/fancy-plugin.js
import Vue from 'vue'
import { myFancyPlugin } from 'fancy-plugin'

Vue.use(myFancyPlugin)

别忘了将它添加到配置中

// nuxt.config.js
export default {
  plugins: [
    { src: '@/plugins/fancy-plugin' },
  ]
}