vue-meta-info（动态更改title、meta等信息）

动态更改title、meta等信息，利于SEO优化
vue-meta-info官网

安装

  1. npm install vue-meta-info --save

main.js

  1. import MetaInfo from 'vue-meta-info';
  2. Vue.use(MetaInfo);

App.vue

  1. <script>
  2. export default {
  3.     metaInfo() {
  4.     return {
  5.       meta: this.metaData
  6.     }
  7.   },
  8.   data() {
  9.     return {
  10.       metaData: []
  11.     }
  12.   },
  13.   watch: {
  14.     $route(to, from) {
  15.       if (!to.meta) {
  16.         return false
  17.       }
  18.       document.title = to.meta.title ? to.meta.title : '快贴宝'
  20.       this.metaData = []
  22.       if (to.meta.keywords) {
  23.         this.metaData.push({
  24.           name: 'keywords',
  25.           content: to.meta.keywords
  26.         })
  27.       } else {
  28.         this.metaData.push({
  29.           name: 'keywords',
  30.           content: ''
  31.         })
  32.       }
  34.       if (to.meta.description) {
  35.         this.metaData.push({
  36.           name: 'description',
  37.           content: to.meta.description
  38.         })
  39.       } else {
  40.         this.metaData.push({
  41.           name: 'description',
  42.           content: ''
  43.         })
  44.       }
  45.     },
  46.   },
  47. }
  48. </script>

vue-cli prerender-spa-plugin 模板预渲染

prerender-spa-plugin：https://github.com/chrisvfritz/prerender-spa-plugin
vue-cli@3参考：https://blog.csdn.net/lv5751394/article/details/98616605
vue-cli@2参考：https://blog.csdn.net/bbsyi/article/details/77897291
部署打包报错：https://blog.csdn.net/jiezaizone/article/details/105815593

要求

router.js 中设置mode: ‘history’

安装

  1. npm install prerender-spa-plugin --save

vue-config.js（vue-cli2是配置build/webpack.prod.conf.js）

  1. const PrerenderSPAPlugin = require('prerender-spa-plugin');
  2. const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
  3. const path = require('path');
  4. module.exports = {
  5.   configureWebpack: config => {
  6.     if (process.env.NODE_ENV !== 'production') return;
  7.     // todo 预渲染
  8.     return {
  9.       plugins: [
  10.         new PrerenderSPAPlugin({
  11.           // 生成文件的路径，也可以与webpakc打包的一致。
  12.           // 下面这句话非常重要！！！
  13.           // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
  14.           staticDir: path.join(__dirname, './dist'),
  15.           // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
  16.           routes: ['/', '/tradingHall'],
  17.           // 这个很重要，如果没有配置这段，也不会进行预编译
  18.           renderer: new Renderer({
  19.             inject: {
  20.               foo: 'bar'
  21.             },
  22.             // headless: false,
  23.             // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
  24.             renderAfterDocumentEvent: 'render-event'
  25.           })
  26.         }),
  27.       ],
  28.     };
  29.   }
  30. }

main.js

  1. new Vue({
  2.   router,
  3.   store,
  4.   render: h => h(App),
  5.   mounted () {
  6.     document.dispatchEvent(new Event('render-event'))
  7.   }
  8. }).$mount('#app')

打包

运行 npm run build，看一下生成的 dist 的目录里是不是有每个路由名称对应的文件夹。然后找个 目录里 的 index.html 打开，看文件内容里是否有该文件应该有的内容。有的话，就设置成功了