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

相关推荐
孤水寒月1 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
脑袋大大的3 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way4 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽6 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头6 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github