NuxtJS项目——插件

Posted 2021-03-03 Bien94

　　Nuxt.js允许在运行Vue.js应用程序之前执行js插件，而nuxt.config.js文件中可以通过plugins属性来配置插件，并且将需要的插件可以放置在plugins目录下。

　　（1）客户端使用的插件

　　如果只想要插件在客户端使用的话，那么通过可通过nuxt.config.js文件的plugins属性的ssr选项来控制，即ssr:false，就表示插件只会在客户端使用，例如：

module.exports = {
  plugins: [
    { src: ‘~/plugins/vue-test‘, ssr: false }
  ]
}

　　由于Nuxt.js 2.4版本，模式已被引入作为插件的选项来指定插件类型，可能的值是：client 或 server，而ssr:false 在下一个主要版本中弃用，将过渡为 mode: ‘client‘，也就是说ssr:false将会被mode:‘client‘所取代。

　　（2）服务端使用的插件

　　可以通过检测process.server这个变量来控制插件中的某些脚本库只在服务端使用。当值为 true 表示是当前执行环境为服务器中。 此外，可以通过检查process.static是否为true来判断应用是否通过nuxt generator生成。您也可以组合process.server和process.static这两个选项，确定当前状态为服务器端渲染且使用nuxt generate命令运行。

　　（3）插件的命名

　　如果假设插件仅在 客户端 或 服务器端 运行，则 .client.js 或 .server.js可以作为插件文件的扩展名应用，该文件将自动包含在相应客户端或者服务端上。如果想同时在客户端和服务端运行的话，那么以.js作为插件文件的扩展名应用。

　　（4）注入

　　有时希望在整个应用程序中使用某个函数或属性值，此时，需要将它们注入到Vue实例（客户端），context（服务器端）甚至 store(Vuex)。按照惯例，新增的属性或方法名使用$作为前缀。

　　如果需要同时在context，Vue实例，甚至Vuex中同时注入，可以使用inject方法,它是plugin导出函数的第二个参数。并且系统会自动将$添加到方法名的前面。

　　（5）周期函数

　　在任何Vue组件的生命周期内，只有beforeCreate和created这两个方法会在客户端和服务端被调用。其他生命周期函数仅在客户端被调用。