预渲染
在构造项目时把局部的静态页面做预渲染，即不需要服务器动态渲染的处理。
目的：
提高一些页面的SEO
实现：
通过指定相应页面的路由来简单的生成静态HTML文件
- 第一步： 创建项目
vue create prerender_app
- 第二步： 安装预渲染插件
npm install prerender-spa-pluguin --save-dev
- 第三步： 配置
webpack文件
在项目根目录下新建
vue.config.js， 编辑如下内容：
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
module.exports = {
configureWebpack: {
plugins: [
new PrerenderSPAPlugin({
// 指定构建好的文件目录
staticDir: path.join(__dirname, 'dist'),
// 指定需要预渲染的的页面的路由
routes: ['/about'],
})
]
}
}
- 第四步：
npm run build构建项目，检查dist目录下如果有单独的about.HTML文件夹:
处理成功截图
ps:prerender-spa-plugin不仅仅可是实现vue单页面应用项目的预渲染，也可以实现angular、react单页面应用的预渲染。
