seo

lufangzhou 6/4/2020 vue

# SEO(Search Engine Optimization)

搜索引擎优化，更容易搜索到该页面。

# 实现

# 1、利用插件`prerender-spa-plugin`

文档 (opens new window)
node安装

npm i prerender-spa-plugin -D

版本

{
  "prerender-spa-plugin": "^2.1.0",
  "@vue/cli": "~4.4.0"
}

1
2
3
4

# 2、`vue.config.js`配置

//prerender-spa-plugin
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
module.exports = {
    if (process.env.NODE_ENV === 'production') {
        return {
          plugins: [
            new PrerenderSPAPlugin({
              // 生成文件的路径，也可以与webpakc打包的一致。
              // 下面这句话非常重要！！！
              // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
              staticDir: path.join(__dirname,'dist'),
              // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
              routes: ['/', '/home', '/page1'],
              // 这个很重要，如果没有配置这段，也不会进行预编译
              renderer: new Renderer({
                inject: {
                  foo: 'bar'
                },
                //headless: false,
                // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                renderAfterDocumentEvent: 'render-event'
              })
            }),
          ]
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 3、`main.js`配置

new Vue({
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

1
2
3
4
5

# 4、路由配置

这里需要用history模式，必须！

const home = () => import('@/views/home/home.vue')
const page1 = () => import('@/views/home/page1.vue')
const routes = [
  {
    path: '/home',
    name: 'home',
    mode: 'history',
    component: home
  },
  {
    path: '/page1',
    name: 'page1',
    mode: 'history',
    component: page1
  }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 5、配置每个路由的`meta`

这里推荐使用vue-meta
文档 (opens new window)
安装

npm i vue-meta -D

在main.js中配置

import VueMeta from 'vue-meta'

Vue.use(VueMeta, {
  // optional pluginOptions
  refreshOnceOnNavigation: true
})

1
2
3
4
5
6

路由内的使用home.vue

export default {
    name: 'home',
    components: {},
    metaInfo: {
      title: 'xxxx，代理进口公司-专注进口清关代理、国际海运、仓储物流服务',
      meta: [
        { charset: 'utf-8' },
        { name: 'keywords', content: '代理进口公司,进口清关代理,国际海运,仓储物流,xxxx'},
        { name: 'description', content: 'xxxx是全球领先的进口清关跨境贸易综合服务平台'}
      ]
    },
}

1
2
3
4
5
6
7
8
9
10
11
12

效果

# 最后打包

npm run build

dist
│   css
│   js
|   index.html
└───home
│   │   index.html
└───|   
│   |
└───page1
    │   index.html

1
2
3
4
5
6
7
8
9
10

# seo查询工具

地址 (opens new window)

# 参考

参考 (opens new window)

lufangzhou

seo

seo