建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
每天進(jìn)步一點(diǎn)點(diǎn)...
在秀洲等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專(zhuān)注、極致的服務(wù)理念，為客戶(hù)提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需設(shè)計(jì)網(wǎng)站,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營(yíng)銷(xiāo)型網(wǎng)站,成都外貿(mào)網(wǎng)站建設(shè)公司,秀洲網(wǎng)站建設(shè)費(fèi)用合理。
自己弄了個(gè)博客網(wǎng)站，運(yùn)行了很久，一直沒(méi)被收錄，才發(fā)現(xiàn)SEO對(duì)單頁(yè)面不太友好。上網(wǎng)學(xué)習(xí)并實(shí)踐了一下，我們可以使用prerender-spa-plugin+vue-meta-info做一個(gè)預(yù)渲染。
一、安裝插件
使用下面命令安裝對(duì)應(yīng)插件
- npm install prerender-spa-plugin --save
- npm install vue-meta-info --save
二、修改配置
1、創(chuàng)建vue.config.js文件，并添加下面內(nèi)容
- const PrerenderSPAPlugin = require('prerender-spa-plugin')
- const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
- const path = require('path')
- module.exports = {
- configureWebpack: () => {
- if (process.env.NODE_ENV !== 'production') return
- return {
- plugins: [
- new PrerenderSPAPlugin({
- staticDir: path.join(__dirname, 'dist'),
- routes: ['/', '/message', '/link', '/about', '/detail/id', "/search"],
- renderer: new Renderer({
- inject: {
- foo: 'bar'
- },
- headless: false,
- renderAfterDocumentEvent: 'render-event'
- })
- })
- ]
- }
- },
- }
2、修改main.js里面的內(nèi)容
- //引入metainfo
- 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')
3、在對(duì)應(yīng)頁(yè)面添加下面內(nèi)容
- export default {
- name: "About",
- metaInfo: {
- title: "網(wǎng)頁(yè)設(shè)計(jì)，模板分享，源碼下載 - 糊涂博客",
- meta: [
- {
- name: "keyWords",
- content: "網(wǎng)頁(yè),簡(jiǎn)介,個(gè)人,小程序,博客",
- },
- {
- name: "description",
- content:
- "糊涂個(gè)人博客，一位編程愛(ài)好者的成長(zhǎng)地。專(zhuān)注于前后端的學(xué)習(xí)，不定期更新分享踩坑過(guò)程，學(xué)習(xí)記錄、網(wǎng)頁(yè)模板、demo源碼等，也希望借此能夠認(rèn)識(shí)更多的朋友。",
- },
- ],
- },
- }
4、使用npm run build命令打包后，會(huì)生成對(duì)應(yīng)的目錄
生成的目錄
三、收錄效果
收錄效果
這只能做一個(gè)簡(jiǎn)單處理，還有其它方法，不過(guò)自己沒(méi)有去實(shí)踐是否可行，就不發(fā)出來(lái)了(重點(diǎn)是不會(huì))
本文題目：Vue用prerender-spa-plugin做SEO優(yōu)化
當(dāng)前URL：http://fisionsoft.com.cn/article/coocosc.html
