vue-pre-render

---

Crawl a SPA (Single-Page Application) and generate pre-rendered content

Feature

1. Configuration Simple
2. Rendering Fast
3. Support webpack and cmd modes

Installation

npm i @yamiwamiyu/vue-pre-render

Usage

1. VUE Router please use createWebHistory

// ./src/router.js
import { createRouter, createWebHistory } from 'vue-router'

export default createRouter({
  // please use createWebHistory
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    { path: '/', component: () => import('./components/index') },
    { path: '/pre/:param', component: () => import('./components/pre') },
    { path: '/dir/indir', component: () => import('./components/dir/indir') },
    { path: '/nopre', component: () => import('./components/nopre') },
  ]
})

2. webpack Usage

Directly writing SEO information into routes can be reused for webpack

// ./routes.js
exports.routes = [
  { path: '/', component: () => import('./components/index') },
  { path: '/pre/:param', component: () => import('./components/pre') },
  { path: '/dir/indir', component: () => import('./components/dir/indir') },
  { path: '/nopre', component: () => import('./components/nopre') },
]

// ./src/router.js
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from '../routes'

export default createRouter({
  // please use createWebHistory
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

In the VUE3 project, the general configuration file is called vue.config.js, and the content is as follows

// ./vue.config.js
const { defineConfig } = require('@vue/cli-service')
const { VuePreRender } = require('@yamiwamiyu/vue-pre-render')
// Directly use the configured route for pre rendering of all routing pages
// Of course, you can also customize it
const { routes } = require('./routes')

module.exports = defineConfig({
  // ...
  //publicPath: "/", // Please don't use "./"
  
  configureWebpack: {
    plugins: [new VuePreRender({ routes, })],
  }
})

3. cmd Usage

1. Create a new configuration file, pre.config.json, in the project root directory. The configuration contents are as follows

{
  "headless": false,
  "routes": ["/", "/pre", "/dir/indir", "/nopre"]
}

2. When you need to pre render (usually after npm run build), execute the following command

node node_modules/@yamiwamiyu/vue-pre-render/cmd.js pre pre.config.json

Document

Configuration

field	description	default
chrome	When you are worried about the inconsistency between the pre rendered effect and the browsing effect of your local browser, you can use the browser installed locally to pre render. For example, under Windows, this value is like C:/Program Files (x86)/Google/Chrome/Application/chrome.exe
headless	Whether to hide the browser during pre rendering	false
dist	Directory generated by VUE project execution npm run build	dist
serve	Pre rendering requires an Express server. This is the port of the server. If this port is occupied, please change an available port	21644
seo	SEO configuration applicable to all pre rendered pages. Directly modify your public/index.html page to achieve the same effect
routes(*)	Routes for all pages requiring pre rendering

SEO

field	description
title	Title of html page
keywords	<meta name="keywords" content="{value}"> It can be an array, such as ['Keyword1', 'Keyword2'] or a string, such as 'Keyword1, Keyword2'
description	<meta name="keywords" content="{value}">, Description of the website
meta	More meta tags, such as [{name:'MetaName ', content:'MetaContent'}]

Router

field	description
path(*)	The address of the routing page. For example, '/' or '/index' You can configure the routing with parameters, such as '/index/param' (generate '/index/param.html') or '/index?key=value' (generate '/index.html')
ppath	The address of the routing page. When the path is configured with parameter based routing, the pre rendering address of the default parameter can be specified using ppath
children	The sub routing page of the route will be pre rendered together for direct compatibility with the routing configuration
output	The output path of the static page. The default output is consistent with the url. For example, '/' or '/index' will output '/index.html'. Set 'my_index' can be output as 'my_index.html'
seo	Routes for current page pre rendering

[
  {
    // url query example

    // default output: index.html
    path: '/index?lang=en',
    // result output: index_en.html
    output: 'index_en',
  },
  {
    // vue router with params example
    // { path: '/pre/:param', component: () => import('./components/pre') }

    // default output: /pre/parameter.html
    path: '/pre/parameter',
    // result output: /pre.html
    output: '/pre',
  }
]

Complete Example

// ./vue.config.js
const { defineConfig } = require('@vue/cli-service')
const { VuePreRender } = require('@yamiwamiyu/vue-pre-render')

module.exports = defineConfig({
  // ...
  //publicPath: "/", // Please don't use "./"
  
  configureWebpack: {
    plugins: [new VuePreRender({ routes: [
      { path: '/' },
      {
        path: '/news'
        children: [
          {
            path: '/news/:id',
            // ppath can pre render pages with id 1
            // otherwise paths with [: parameter] will not be pre rendered
            ppath: '/news/1',
          }
        ]
      },
      {
        path: '/privacy',
        // ppath can pre render pages when lang='en '
        // unlike [: parameter], it pre renders pages with or without ppath
        ppath: '/privacy?lang=en',
        // The default is /privacy.html, so that you can output /en_privacy.html
        output: '/en_privacy',
      },
      {
        path: '/about',
        // Can customize SEO information for/about pages
        seo: { title: 'About Us' }
      },
    ]})],
  }
})

Demo

1. Rendering

Connect chrome success!
Express serve launched! http://localhost:21644 in dist
page redirected! /nopre -> /
render complete! /pre
render complete! /dir/indir
render complete! /
Pre rendering is complete!

page redirected! /nopre -> / This means that the page url is redirected from "/pre" to "/"
The reason for this is that, for example, the page needs to be logged in to display, but it jumps to the login page because there is no login
Although '/nopre.html' is finally generated, the content of '/nopre.html' is the original '/index.html' content

2. Result

• index.html
• pre.html
• nopre.html
• dir/
  • indir.html