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

养意2024-05-08 8:43

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

安装vue-router和@vue/cli-plugin-prerender插件：
复制代码
```
npm install vue-router@next @vue/cli-plugin-prerender@next
```

在Vue项目的根目录下创建一个vue.config.js文件，并添加以下内容：

js 复制代码

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

在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
  }
  // 添加其他需要预渲染的路由
]

在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')

运行以下命令进行预渲染：
复制代码
```
vue-cli-service prerender
```

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