Install prerender-spa-plugin and vue-meta-info

cnpm install prerender-spa-plugin vue-meta-info –save

2. Vue cli2. X

Build/webpack. Prod. Conf. Add the following code inside the plugins array under the js file

// add path.join(__dirname, '.. /dist'), // Need to pre-render the routing information ['/index', '/about'], {// capture the page information after a certain amount of time, so that the page data load is complete captureAfterTime: IgnoreJSErrors: true, phantomOptions: '--web-security=false', maxAttempts: 10,},)Copy the code

Once this is done, the project can run NPM run Build in the

The corresponding HTML files are generated in the index and About folders under dist

3. Mount vue-meta-info globally in the main.js file

import MetaInfo from 'vue-meta-info'Vue.use(MetaInfo)
Copy the code

4. The last step is to add the corresponding VUE file that wants to add the different SEO

// Seo optimizationmetainfo: {title: "I am ", meta: [{name: "keywords", content:" 111, 222, 333",}, {name: "Description ", content:" This is a description of the home page ",},],},Copy the code

5. In this way, the SEO optimization of the corresponding VUE page is completed