Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

Vue-cli package projects are generally SPA projects. As we all know, single page applications are not conducive to SEO. There are two solutions: SSR (server rendering) and pre-rendering, and we only discuss pre-rendering here

Vue – cli2.0 version

The installation

npm install prerender-spa-plugin --save
Copy the code

Webpack.prod.conf.js adds some code

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')    // Import plug-ins
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

plugins: [/ / configuration PrerenderSPAPlugin
    new PrerenderSPAPlugin({
      // The generated file path can also be the same as webpakc package.
      staticDir: path.join(__dirname, '.. /dist'),
      
      // Corresponding to its own routing file. For example, if index has parameters, write /index/param1.
      routes: ['/'.'/report'.'/genius'.'/index/param1'].// If this section is not configured, it will not be precompiled
      renderer: new Renderer({
          inject: {
            foo: 'bar'
          },
          headless: false.// Document.dispatchEvent (new Event('render- Event ')) in main.js.
          renderAfterDocumentEvent: 'render-event'})})]Copy the code

Add it in main.js

new Vue({
  el: '#pingce',
  router,
  store,
  components: { App },
  template: '<App/>'.// Add mounted or precompile will not be performed
  mounted () {
    document.dispatchEvent(new Event('render-event'))}})Copy the code

Router.js set mode to “history”

Run NPM run build to see if the generated dist directory has a folder for each route name. Then find a directory in index.html and open it with the IDE to see if the file has the content it should have.

Each route you configure will generate a folder, and then an index.html file will be generated under each folder

Vue – cli3.0 version

The 3.0 CLI looks much simpler, with 2.0 build and config directories removed, so how do we change the webpack configuration?

Create vue.config.js in the root directory to do your configuration.

The installation

npm install prerender-spa-plugin --save
Copy the code

Increase in the vue – config. Js

const PrerenderSPAPlugin = require('prerender-spa-plugin');  // Import plug-ins
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
    configureWebpack: config= > {
        if(process.env.NODE_ENV ! = ='production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    // The generated file path can also be the same as webpakc package.
                    // This directory can only have one level. If the directory level is greater than one level, there will be no errors during generation and it will just be stuck during pre-rendering.
                    staticDir: path.join(__dirname,'dist'),
                    For example, if about has parameters, you need to write /about/param1.
                    routes: ['/'.'/product'.'/about'].// It must be configured or it will not be precompiled
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false.// Document.dispatchEvent (new Event('render- Event ')) in main.js.
                        renderAfterDocumentEvent: 'render-event'})}),]}; }}Copy the code

Add it in main.js

new Vue({
  router,
  store,
  render: h= > h(App),
  / / and the vue - config. Js renderAfterDocumentEvent: 'render - event must correspond to the name
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')
Copy the code

Router. js set mode to “history”

Run NPM run build to see if the generated dist directory has a folder for each route name.

Conclusion:

1. The best route mode isto use history mode. You can also run generate files without using it, but view each index.html file as the content master.

StaticDir: path.join(__dirname,’.. /dist’) in 3.0, set staticDir: path.join(__dirname,’dist’).

Recommended if you want to set the title and meta information for each page[vue-meta-info]

Praise support, hand left lingering fragrance, with rongyan, move your rich little hands yo, thank you big guy can leave your footprints.

Past wonderful recommendation

Front-end common encryption methods

Canvas Pit Climbing Road

Don’t know SEO optimization? An article helps you understand how to do SEO optimization

Canvas Pit Road

Wechat small program development guide and optimization practice

Talk about mobile adaptation

Front-end performance optimization for actual combat

Talk about annoying regular expressions

Obtain file BLOB stream address to achieve the download function

Vue virtual DOM confused? This article will get you through the virtual DOM once and for all

Git Git

Easy to understand Git introduction

Git implements automatic push

Interview Recommendations

Front ten thousand literal classics – the foundation

Front swastika area – advanced section

More exciting details: personal homepage