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

相关推荐
Amos_Web9 小时前
Rust实战教程--文件管理命令行工具
前端·rust·全栈
li理9 小时前
鸿蒙相机开发入门篇(官方实践版)
前端
webxin6669 小时前
页面动画和延迟加载动画的实现
前端·javascript
逛逛GitHub9 小时前
这个牛逼的股票市场平台,在 GitHub 上开源了。
前端·github
细节控菜鸡9 小时前
【排查实录】Web 页面能打开,服务器能通接口,客户端却访问失败?原因全在这!
运维·服务器·前端
duandashuaige9 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
今天头发还在吗9 小时前
React + Ant Design 日期选择器避免显示“Invalid Date“的解决方案
前端·react.js·前端框架·ant design
我命由我123459 小时前
Photoshop - Photoshop 工具栏(14)抓手工具
ui·职场和发展·pdf·求职招聘·职场发展·photoshop·美工
时雨__10 小时前
利用AndVX6开发流程图——问题总结
前端
渣哥10 小时前
当容器里有多个 Bean,@Qualifier 如何精准定位?
javascript·后端·面试