关于vue-cli项目的预渲染方法(prerender-spa-plugin)

最新推荐文章于 2025-07-01 19:47:59 发布

原创

最新推荐文章于 2025-07-01 19:47:59 发布 · 894 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #vue.js #css3 #html5

本文介绍了如何在Vue CLI 2.0和3.0版本中使用prerender-spa-plugin进行预渲染，以解决SPA应用的SEO问题。详细步骤包括安装插件、配置webpack、修改main.js和router.js等。同时，文中列举并解释了打包后样式丢失可能的原因及排查方法，如webpack的publicPath设置、资源引入顺序、自适应插件配置等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预渲染(prerender-spa-plugin)

前言：使用vue-cli打包项目一般为spa项目，而单页面应用不利于SEO，因项目急需解决此问题，故使用需渲染解决方案。

vue-cli2.0版本

1.安装

npm install prerender-spa-plugin --save

2.在build下的webpack.prod.conf.js增加部分代码

'use strict'
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')   //引用插件
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

 // 配置PrerenderSPAPlugin
    new PrerenderSPAPlugin({
   
   
      // 生成文件的路径，也可以与webpakc打包的一致。
      staticDir: path.join(__dirname, '../dist'),
      
      // 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
      routes: ['/', '/index','/newWater','/repair',