vue3如何实现预渲染超详细保姆级

Vue 3提供了一种名为"静态站点生成(Static Site Generation,SSG)"的预渲染方式,可以将部分或全部页面在构建时预先生成为静态HTML文件。以下是实现预渲染的步骤:

  1. 安装vue-router和@vue/cli-plugin-prerender插件:

    复制代码
    npm install vue-router@next @vue/cli-plugin-prerender@next
  2. 在Vue项目的根目录下创建一个vue.config.js文件,并添加以下内容:

    js 复制代码
    module.exports = {
      pluginOptions: {
        prerenderSpa: {
          registry: undefined,
          renderRoutes: [
            '/',
            '/about',
            '/contact'
            // 添加其他需要预渲染的页面路径
          ],
          useRenderEvent: true,
          headless: true,
          onlyProduction: true
        }
      }
    }
  3. 在Vue项目的src目录下创建一个名为prerender的目录,并在其中新建一个routes.js文件,用于定义需要预渲染的路由:

    js 复制代码
    import Home from '@/views/Home.vue'
    import About from '@/views/About.vue'
    import Contact from '@/views/Contact.vue'
    
    export default [
      {
        path: '/',
        component: Home
      },
      {
        path: '/about',
        component: About
      },
      {
        path: '/contact',
        component: Contact
      }
      // 添加其他需要预渲染的路由
    ]
  4. 在Vue项目的入口文件(一般是src/main.js)中,引入routes.js并修改createRouter函数的调用:

    js 复制代码
    import { createApp } from 'vue'
    import { createRouter, createWebHistory } from 'vue-router'
    import routes from './prerender/routes'
    import App from './App.vue'
    
    const router = createRouter({
      history: createWebHistory(),
      routes
    })
    
    createApp(App).use(router).mount('#app')
  5. 运行以下命令进行预渲染:

    复制代码
    vue-cli-service prerender

运行以上命令后,Vue将根据预定义的路由列表生成静态HTML文件,并保存在dist目录中。这些预渲染的HTML文件可以直接部署在任何静态服务器上,从而实现更快的首次加载速度和SEO优化。

相关推荐
1234Wu3 分钟前
React Native 接入 eCharts
javascript·react native·react.js
程序员爱钓鱼25 分钟前
Go 语言泛型 — 泛型语法与示例
后端·面试·go
爱coding的橙子1 小时前
每日算法刷题Day42 7.5:leetcode前缀和3道题,用时2h
算法·leetcode·职场和发展
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者2 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile2 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639972 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫
我是如子啊2 小时前
【解决“此扩展可能损坏”】Edge浏览器(chrome系列通杀))扩展损坏?一招保留数据快速修复
前端·chrome·edge
灵性花火2 小时前
Qt的前端和后端过于耦合(0/7)
开发语言·前端·qt
YuTaoShao4 小时前
【LeetCode 热题 100】56. 合并区间——排序+遍历
java·算法·leetcode·职场和发展