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文件，并添加以下内容：

   module.exports = {
     pluginOptions: {
       prerenderSpa: {
         registry: undefined,
         renderRoutes: [
           '/',
           '/about',
           '/contact'
           // 添加其他需要预渲染的页面路径
         ],
         useRenderEvent: true,
         headless: true,
         onlyProduction: true
       }
     }
   }
   

3. 在Vue项目的src目录下创建一个名为prerender的目录，并在其中新建一个routes.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函数的调用：

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