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
这两个方法会在客户端和服务端被调用。其他生命周期函数仅在客户端被调用。