• Current version nuxT: ^2.15.3

1. Mapping between SSR, Target and scripts

  • package.json
{
  "scripts": {
    "dev": "nuxt"."build": "nuxt build".// Webpack compiles output files
    "start": "nuxt start".// Start a Web server
    "generate": "nuxt generate" // Generate static resources for build artifacts}}Copy the code
  • nuxt.config.js
// nuxt.config.js
ssr: true | false.// Whether to enable server template rendering
target: 'server' | 'static' // Explain later
Copy the code

  • There are three actual combinations of SSR and target

    • ssr=true,target=server

      • AsyncData will execute; Data in the VUE template is dynamically populated; The server side renders HTML files

      • The script needs to be executed: nuxt build && nuxt start

    • ssr=true,target=static

      • AsyncData does not execute; Data for fixed display; The server side renders HTML files

      • You need to execute the script: nuxt build && nuxt generate && nuxt start

    • SSR = false, target = server or SSR = false, target = static

      • AsyncData does not execute; Data for fixed display; The client is required to render the HTML file

      • You need to execute the script: nuxt build && nuxt generate && nuxt start

Conclusion: SSR and target have overlapping effects

2. The component does not support server rendering

For example: the vue – swiper – component

The processing method is as follows:

Step 1: Create a swiper.js file in the plugins folder

Part two: Add the following

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);Copy the code

Step 3: Add to nuxt.config.js and set mode=client

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

Novice VUE development, welcome correction.