Vue-CLI路由懒加载预渲染项目实战

最新推荐文章于 2024-04-29 09:30:00 发布

weixin_34378045

最新推荐文章于 2024-04-29 09:30:00 发布

阅读量459

点赞数

文章标签： javascript webpack 运维 ViewUI

原文链接：https://juejin.im/post/5befb5a5e51d4543cd1741c3

版权

常见的 Vue单页SPA构建之后的index.html只是一个包含根节点的空白页面，当所有需要的js加载完毕之后，才会开始解析并创建 vnode,然后再渲染出真实的DOM。当这些js文件过大而网速又很慢或者出现意料之外的报错时，就会出现所谓的白屏。

而且单页SPA还有一个很大的弊端就是对SEO很不友好。那么如何解决这些问题呢?

SSR(Nuxt)--当然是很好的解决方案，但这也意味着一定的学习成本和运维成本，而如果你已经有了一个现成的Vue单页应用，转向SSR也并不是一个无缝的过程，需要投入更大的学习成本去开发。

那么预渲染就显得更加合适了。只需要安装一个Webpack的插件+一些简单的Webpack配置就可以解决上述的两个问题。

项目实战预览

用手机预览效果更佳(PC端请用手机调试模式)

没有预渲染:

预览地址:http:fancy.czero.cn

Github:github.com/czero1995/f…

打包完成的项目结构:

有预渲染:

预览地址:http:router.czero.cn

Github:github.com/czero1995/f…

打包完成的项目结构:

查看源码: 经过prerender预渲染过后的代码:

将Vue-cli单页SPA转为预渲染

1.需要将router设为history模式。

2.修改服务器nginx的配置(刷新页面的时候会做重定向跳转)

try_files $uri /index.html;
复制代码

提个醒:如下图，这里有个大坑，当需要用懒加载来做预渲染，nginx上配置 try_files uri uri/ /index.html;

没在首页刷新页面的时候，会报错。

3.安装prerender-spa-plugin

cnpm install prerender-spa-plugin --save
复制代码

4.修改build/webpack.prod.conf.js下的配置为:

5.将config/index.js里的build中的assetsPublicPath字段设置为'/'

6.调整main.js

new Vue({
  i18n,
  router,
  store,
  render: h => h(App)
}).$mount('#app', true)
复制代码

7.执行npm run build你会发现，最后打包出来的目录和之前不太一样，都是一些渲染完成好的页面

加持vue-meta-info提高SEO

npm install vue-meta-info --save
复制代码

全局引入 vue-meta-info

import Vue from 'vue'
import MetaInfo from 'vue-meta-info'

Vue.use(MetaInfo)
复制代码

组件内静态使用 metaInfo

  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
复制代码