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优化。

相关推荐
没有bug.的程序员3 小时前
JAVA面试宝典 - 《MyBatis 进阶:插件开发与二级缓存》
java·面试·mybatis
工业甲酰苯胺3 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止3 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms3 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登3 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
珊瑚里的鱼4 小时前
LeetCode 692题解 | 前K个高频单词
开发语言·c++·算法·leetcode·职场和发展·学习方法
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin