nuxtjs 开发总结

• 当前版本 nuxt: ^2.15.3

1. ssr 与 target 及 scripts 的对应关系

• package.json

{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build", // webpack编译产出文件
    "start": "nuxt start", // 启动一个web服务器
    "generate": "nuxt generate" // 将build后的产物生成静态资源
  }
}

• nuxt.config.js

// nuxt.config.js
ssr: true | false, // 是否开启服务端模板渲染
target: 'server' | 'static' // 稍后解释

• 其中 ssr 与 target 一共存在三种实际组合

  • ssr=true,target=server

    • asyncData 会执行; vue 模板中的数据会动态填充; 服务器端渲染 html 文件

    • 需要执行脚本: nuxt build && nuxt start

  • ssr=true,target=static

    • asyncData 不会执行; 数据为固定展示; 服务器端渲染 html 文件

    • 需要执行脚本: nuxt build && nuxt generate && nuxt start

  • ssr=false,target=server 或者 ssr=false,target=static

    • asyncData 不会执行; 数据为固定展示; 需要客户端渲染 html 文件

    • 需要执行脚本: nuxt build && nuxt generate && nuxt start

总结: ssr 与 target 的作用有重叠

2. 组件不支持服务端渲染的处理

例如: vue-swiper-component

处理方式如下:

第一步: plugins 文件夹下新建 swiper.js 文件

第二部: 添加如下内容

import Vue from "vue";
import { Swiper, Slide } from "vue-swiper-component";

const swiper = {
  install(Vue) {
    Vue.component("Swiper", Swiper);
    Vue.component("Slide", Slide);
  },
};
Vue.use(swiper);

第三步: 添加到 nuxt.config.js 中并设置 mode=client(客户端渲染)

export default {
  // ...
  plugins: [{ src: "@/plugins/swiper", mode: "client" }],
};

新手 vue 开发, 欢迎指正.