vue项目实现预渲染

预渲染

在构造项目时把局部的静态页面做预渲染,即不需要服务器动态渲染的处理。
目的:
提高一些页面的SEO
实现:
通过指定相应页面的路由来简单的生成静态HTML文件

  • 第一步: 创建项目
vue create prerender_app
  • 第二步: 安装预渲染插件
npm install prerender-spa-pluguin --save-dev
  • 第三步: 配置webpack文件

在项目根目录下新建vue.config.js, 编辑如下内容:

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        // 指定构建好的文件目录
        staticDir: path.join(__dirname, 'dist'),
        // 指定需要预渲染的的页面的路由
        routes: ['/about'],
      })
    ]
  }
}
  • 第四步: npm run build 构建项目,检查dist目录下如果有单独的about.HTML文件夹:
    处理成功截图

    ps: prerender-spa-plugin不仅仅可是实现vue单页面应用项目的预渲染,也可以实现angular、react单页面应用的预渲染。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容