预编译解决vue-cli 4.0项目的seo问题

news/2024/5/11 4:35:38/文章来源:https://blog.csdn.net/qq_43504375/article/details/107024804

预编译解决vue-cli 4.0项目的seo问题#

vue项目上线之后要求解决一下seo问题，现在总结一下希望能帮到各位
ps：其实网上已经有很多的解释了我这边就不多做介绍
贴一下vue-cli和依赖的版本

在这里插入图片描述

1，需要用到我们的prerender-spa-plugin 和 vue-meta-info

//这是预编译的
npm i prerender-spa-plugin --save
//这是生成meta
npm i vue-meta-info --save

2,安装好就需要配置我们的vue.config.js 在我们的项目中找到vue.config.js

（没有就需要自己创建对的没错自己创建就行因为项目的vue.config.js（package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载）

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {configureWebpack: config => {if (process.env.NODE_ENV !== 'production') return;return {plugins: [new PrerenderSPAPlugin({//staticDir: path.join(__dirname, process.env.VUE_APP_OUTPUT_DIR),如果直接用path 可能会报错 不要问为什么我要特意备注一下 staticDir: path.join(__dirname,'dist'),routes: ['/First', '/Abutton','/last','/tahoe','/home','/NewsDetail'],renderer: new Renderer({inject: {foo: 'bar'},headless: false,// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。renderAfterDocumentEvent: 'render-event'})}),],};}
}

3，在我们的mian.js文件中就可以进行配置

new Vue({router,store,render: h => h(App),methods: {},//这个是重点 其他不用 mounted () {document.dispatchEvent(new Event('render-event')) // 预渲染
}
}).$mount('#app')

4，然后打包就可以

**（打包的名对应的就是我们的 routes: [’/First’, ‘/Abutton’,’/last’,’/tahoe’,’/home’,’/NewsDetail’]）

5，下面就可以在我们的页面（就是vue页面）中写上我们的meta就可以

//这是生成meta的  
//main.js文件
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

6，下面就可以直接在我们的vue页面script中加进来

  // 配置title和meta数据metaInfo: {title: 'xxxxx',meta: [{name: 'keywords',content: 'xxxx'},{name: 'description',content: 'xxxxx'},{//这个只是我项目中用到 具体要不要看你们自己的项目name: 'baidu-site-verification',content: 'xxxx'}]},