Vue-cli3项目seo优化，静态化打包（动态改变页面Titl、keyWords、description）
文章目录
Vue-cli3项目seo优化，静态化打包（动态改变页面Titl、keyWords、description）一 、首先需要两个插件，先安装下来 `prerender-spa-plugin` `vue-meta-info`二 、新建文件三 、给需要的页面添加自己的标题描述语其实前端可以做的seo操作很少，作用也不大，Vue也有自己专门的一套针对可以seo的框架，这次我说的方法是在不改框架的基础上做seo（自我感觉毫无意义…）
一 、首先需要两个插件，先安装下来prerender-spa-pluginvue-meta-info
俩插件配置一下淘宝镜像npm i就行
二 、新建文件
根目录下创建
vue.config.js
// 引入文件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; // 判断那种环境做seoreturn {plugins: [new PrerenderSPAPlugin({staticDir: path.join(__dirname, "dist"), // 输出routes: ["/A","/B","/C","/D","/E","/F","/G","/H","/I"], // 你路由的名字// publicPath:"/",renderer: new Renderer({inject: {foo: "bar",},headless: false,renderAfterDocumentEvent: "render-event",}),}),],};},publicPath:"/", // 解决线上刷新页面样式图片丢失问题}
三 、给需要的页面添加自己的标题描述语
main.js
// 引入import MetaInfo from 'vue-meta-info'// 使用Vue.use(MetaInfo)new Vue({router,store,render: (h) => h(App),// 需要加上下面这个东西mounted () {document.dispatchEvent(new Event('render-event')) // 需要加上}}).$mount("#app");
对应页面静态化写死的
export default {metaInfo: {title: 'aaaaaaaaaaaaaaaaa',meta: [{name: 'keyWords',content: 'bbbbbbbbbbbbbbb'},{name: 'description',content: 'ccccccccccccccccc'}]},}
对应页面动态的（个人感觉这个没屁用，但是老板要，传说中的心理安慰？）
场景：公司的新闻，要抓取到新闻标题为title，文章前一百字为description…
export default {metaInfo(){return {title:this.title + '-标题标题',meta: [{name: 'keyWords',content: '新闻'},{name: 'description',content: this.description // 文章前一百字}]}},}
然后你打包的时候，他会启动一个模拟浏览器跑一边你的需要静态化的路由页面，没问题就成功了，最后会生成新的打包文件，目录会多出你静态化的文件夹。
奇怪的知识又增加了，既然要seo为啥不直接选可以seo的框架呢？或者不直接用jq+html呢？只能说上有政策下有对策吧…打工人打工魂呐
