vue实现静态化
Vue 静态化实现方法
Vue 静态化通常指将 Vue 应用预渲染为静态 HTML 文件，提升 SEO 和首屏加载速度。以下是几种常用方法：
使用 Nuxt.js 框架
Nuxt.js 提供开箱即用的静态生成功能，适合构建静态站点或混合应用。安装 Nuxt.js 后，在 nuxt.config.js 中配置 target: 'static' 即可生成静态文件。
npx create-nuxt-app my-project修改配置文件：
export default {
target: 'static'
}运行生成命令：
npm run generateVue CLI 配合 prerender-spa-plugin
Vue CLI 项目可通过插件实现静态化。安装 prerender-spa-plugin 并修改 vue.config.js：
npm install prerender-spa-plugin -D配置示例：
const PrerenderSPAPlugin = require('prerender-spa-plugin')
module.exports = {
configureWebpack: {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/about']
})
]
}
}手动预渲染方案
对于简单页面，可通过 Puppeteer 实现自定义预渲染。创建脚本文件 prerender.js：
const puppeteer = require('puppeteer')
(async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('http://localhost:8080')
const html = await page.content()
// 将 html 写入文件
await browser.close()
})()静态化注意事项
- 动态路由需在生成时指定所有可能路径
- 避免使用客户端专有代码（如
window对象） - 接口数据可通过
asyncData或fetch提前获取 - 部署时需配置服务器返回 404 页面为
index.html
增量静态生成（ISG）
如需混合静态与动态功能，可考虑：
- Nuxt.js 的
generate.routes动态生成路由 - 使用 Vercel 等平台的自动 ISG 功能
- 实现服务端逻辑按需生成页面
以上方法可根据项目需求选择，Nuxt.js 方案最完整，Vue CLI 插件适合现有项目改造，手动方案灵活性最高。
