你可以配置需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件,可以是你自己写的库或第三方模块。

需要注意的是,在任何 Vue 组件的生命周期内, 只有 beforeCreatecreated 这两个钩子方法会在 客户端和服务端均被调用。其他钩子方法仅在客户端被调用。

使用第三方模块

我们可以在应用中使用第三方模块,一个典型的例子是在客户端和服务端使用 axios 做 HTTP 请求。

首先我们需要安装 npm 包:

  1. npm install --save axios

然后在页面内可以这样使用:

  1. <template>
  2. <h1>{{ title }}</h1>
  3. </template>
  4. <script>
  5. import axios from 'axios'
  6. export default {
  7. async asyncData ({ params }) {
  8. let { data } = await axios.get(`https://my-api/posts/${params.id}`)
  9. return { title: data.title }
  10. }
  11. }
  12. </script>

有一个值得注意的问题是,如果我们在另外一个页面内也引用了 axios,那么在应用打包发布的时候 axios 会被打包两次,而实际上我们只需要打包一次。这个问题可以通过在 nuxt.config.js 里面配置 build.vendor 来解决:

  1. module.exports = {
  2. build: {
  3. vendor: ['axios']
  4. }
  5. }

经过上面的配置后,我们可以在任何页面里面引入 axios 而不用担心它会被重复打包。

使用 Vue 插件

假如我们想使用 vue-notifications 显示应用的通知信息,我们需要在程序运行前配置好这个插件。

首先增加文件 plugins/vue-notifications.js

  1. import Vue from 'vue'
  2. import VueNotifications from 'vue-notifications'
  3. Vue.use(VueNotifications)

然后, 在 nuxt.config.js 内配置 plugins 如下:

  1. module.exports = {
  2. plugins: ['~/plugins/vue-notifications']
  3. }

想了解更多关于 plugins 的配置方法,请参考 插件 API 文档

实际上, vue-notifications 会被打包至应用的脚本代码里, 但是它属于第三方库,我们理应将它打包至库文件里以获得更好的缓存效果。(译者注:应用代码比库文件修改频繁,应尽量将第三方库打包至单独的文件中去)。

我们可以更新 nuxt.config.js 文件,在 vendor 构建配置项里添加 vue-notifications

  1. module.exports = {
  2. build: {
  3. vendor: ['~/plugins/vue-notifications']
  4. },
  5. plugins: ['~/plugins/vue-notifications']
  6. }

只在浏览器里使用的插件

有些插件可能只是在浏览器里使用,所以你可以用 ssr: false 变量来配置插件只从客户端还是服务端运行。

举个例子:

nuxt.config.js:

  1. module.exports = {
  2. plugins: [
  3. { src: '~/plugins/vue-notifications', ssr: false }
  4. ]
  5. }

plugins/vue-notifications.js:

  1. import Vue from 'vue'
  2. import VueNotifications from 'vue-notifications'
  3. Vue.use(VueNotifications)

同样地,如果有些脚本库你只想在服务端使用,在 Webpack 打包 server.bundle.js 文件的时候会将 process.server 变量设置成 true