当前位置：首页 > VUE

vue实现静态化

2026-02-18 12:33:34VUE

Vue 静态化实现方法

Vue 静态化通常指将 Vue 应用预渲染为静态 HTML 文件，适合内容不频繁变化的场景，如官网、博客等。以下是几种常见实现方式：

使用 Vue CLI 插件

Vue CLI 提供 @vue/cli-plugin-prerender 插件，可快速实现静态化。安装后配置 vue.config.js：

vue实现静态化

module.exports = {
  pluginOptions: {
    prerenderSpa: {
      renderRoutes: ['/', '/about'], // 需要预渲染的路由
      useRenderEvent: true,
      headless: true,
      onlyProduction: true
    }
  }
}

Nuxt.js 方案

Nuxt.js 内置静态生成功能，运行 nuxt generate 命令即可生成静态文件。配置 nuxt.config.js：

vue实现静态化

export default {
  target: 'static', // 指定静态模式
  generate: {
    routes: ['/custom-page'] // 动态路由需预先指定
  }
}

手动预渲染

通过 puppeteer 等工具手动抓取页面并保存为 HTML：

const puppeteer = require('puppeteer')
const routes = ['/', '/about']

async function prerender() {
  const browser = await puppeteer.launch()
  for (const route of routes) {
    const page = await browser.newPage()
    await page.goto(`http://localhost:8080${route}`)
    await page.content() // 获取HTML内容并保存
  }
  await browser.close()
}

静态化注意事项

动态数据需通过 API 异步获取，静态化仅包含初始状态
路由需配置为 history 模式，避免哈希模式问题
生成的静态文件需通过 Nginx 等服务器部署
对于大量页面，建议分批次生成避免内存溢出

混合渲染策略

对动态内容部分采用客户端渲染，其余部分静态化：

<template>
  <div>
    <!-- 静态内容 -->
    <h1>{{ staticTitle }}</h1>
    <!-- 动态内容 -->
    <client-only>
      <live-data-component />
    </client-only>
  </div>
</template>