当前位置：首页 > VUE

vue实现页面静态化

2026-01-20 09:11:14VUE

Vue 实现页面静态化的方法

使用 Nuxt.js 进行静态化生成

Nuxt.js 是一个基于 Vue 的框架，支持静态化生成（Static Site Generation, SSG）。通过配置 nuxt.config.js 文件，可以生成完全静态的 HTML 文件。

安装 Nuxt.js：

npx create-nuxt-app <project-name>

配置 nuxt.config.js：

export default {
  target: 'static', // 指定为静态生成模式
  generate: {
    fallback: '404.html' // 生成 404 页面
  }
}

运行生成命令：

npm run generate

生成的静态文件会输出到 dist 目录，可直接部署到任何静态托管服务。

使用 Vue CLI 配合 prerender-spa-plugin

Vue CLI 项目可以通过插件实现静态化。prerender-spa-plugin 是一个常用的预渲染插件。

安装插件：

npm install prerender-spa-plugin --save-dev

在 vue.config.js 中配置：

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/', '/about', '/contact'], // 需要预渲染的路由
      })
    ]
  }
}

运行构建命令：

npm run build

使用 VuePress 生成静态文档

VuePress 是一个基于 Vue 的静态站点生成器，适合文档类内容的静态化。

安装 VuePress：

npm install -g vuepress

创建项目结构：

docs/
  .vuepress/
    config.js
  README.md

配置 config.js：

module.exports = {
  title: 'My Static Site',
  description: 'A static site generated by VuePress'
}

运行生成命令：

vuepress build docs

手动导出静态 HTML

对于简单的 Vue 单页应用，可以通过 vue-server-renderer 手动导出静态 HTML。

安装依赖：

npm install vue-server-renderer --save

创建导出脚本（如 export.js）：

const fs = require('fs');
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();

const app = new Vue({
  template: '<div>Hello, static world!</div>'
});

renderer.renderToString(app, (err, html) => {
  if (err) throw err;
  fs.writeFileSync('index.html', html);
});

运行脚本：