Problem Description:

When using VueJs to develop projects, due to the characteristics of single page project (SPA), only one HTML file will be output, which is not conducive to search engine optimization, and there is a big pain point for some projects that rely on search promotion. And the traditional JS+HTML in efficiency, maintainability, project performance is not as good as the framework, so in this case, we need to provide a solution for the framework, taking into account the development efficiency and SEO

Scheme 1: SSR server rendering

Nuxt.js is a VUE based SSR framework packaged with Webpack and Node.js. With nuxT. js, you don’t need to build your own SET of SSR programs. Instead, a first-screen rendering Web application can be implemented through its agreed file structure and API. However, for an already formed project, the transformation cost is large, so this paper focuses on the second scheme.

Option 2: Pre-render (recommended)

Prerender-spa-plugin + vue-meta-info configurewebpack and pages to implement pre-render schemes, and eventually build multiple HTML files

Features: easy to implement, small change, more controllable

Disadvantages: Does not support dynamic routing and takes a long time to install and build

Note: It must be history mode

  • 1. Download the required library file
npm install vue-meta-info --save
npm install prerender-spa-plugin --save
Copy the code
  • 2.main.js
import Vue from 'vue'
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
new Vue({
  router,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')
Copy the code
  • 3. The configuration webpack
  • Pothole avoidance tips:The injectProperty property in the configuration is a magic tool that can help you solve some confusing problems
  • In a precompiled environment:window.__PRERENDER_INJECTED === undefined
  • Online operation environment:Window.__prerender_injected === The configured value of inject
const path = require('path') const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; Module. exports = {new PrerenderSPAPlugin({// required - path to webpack output application to pre-render staticDir: Path.join (__dirname, '/dist'), // required - route to render. Routes: ['/index ', '/ home', '/ login'], / / pre-rendered proxy interface / / server: {/ / proxy: {/ / '/ API: {/ / target: 'http://localhost:9001', / / secure: false / / / / / /}}}, / / the renderer the renderer: New Renderer({// Optional - Attribute name to add to the Window object that contains' inject 'content. InjectProperty: '__PRERENDER_INJECTED', // Optional - any value that you wish your application to have access to through 'window.injectProperty'. Inject: {foo: 'bar'}, headless: true, // Display browser window while rendering. Used for debugging renderAfterDocumentEvent: 'render - event'. / / corresponding to the main event name})}) in js,}Copy the code
  • 4. Configure SEO text content for the page that needs to be pre-rendered (corresponding to the page pointed to by the routes in the routes array above)
Export default {metaInfo: {title: 'I am the title of the index page ', meta: [{name: 'keywords', content: }, {name: 'description', content: 'I am description'}]},}Copy the code