Vue-cli3项目seo优化,静态化打包(动态改变页面Titl、keyWords、description)
文章目录
Vue-cli3项目seo优化,静态化打包(动态改变页面Titl、keyWords、description)一 、首先需要两个插件,先安装下来 `prerender-spa-plugin` `vue-meta-info`二 、新建文件三 、给需要的页面添加自己的标题描述语其实前端可以做的seo操作很少,作用也不大,Vue也有自己专门的一套针对可以seo的框架,这次我说的方法是在不改框架的基础上做seo(自我感觉毫无意义…)
一 、首先需要两个插件,先安装下来prerender-spa-plugin
vue-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呢?只能说上有政策下有对策吧…打工人打工魂呐