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
這兩個方法會在客戶端和服務端被調用。其他生命周期函數僅在客戶端被調用。