测试环境
利用脚手架生成一个vue项目，需要选择 vue-router
# 安装 Vue Cli cnpm install -g @vue/cli $ vue --version 3.12.0 # 创建一个项目 vue create vue-demo
一、预渲染
1、安装插件
cnpm install prerender-spa-plugin --save
2、配置预渲染
vue.config.js 中增加,没有就在项目根目录新建一个
配置 里边的 routes 选项，说明需要预渲染的路由页面
const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { configureWebpack: config => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成文件的路径，也可以与webpakc打包的一致。 // 下面这句话非常重要！！！ // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。 staticDir: path.join(__dirname,'dist'), // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。 routes: ['/', '/about'], // 这个很重要，如果没有配置这段，也不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }), ], }; } }
3、在main.js中增加
new Vue({ router, render: h => h(App), // 增加以下内容 mounted () { document.dispatchEvent(new Event('render-event')) } }).$mount('#app')
4、about.vue 文件写上固定文本
<template> <div class="about"> <h1>这是about</h1> </div> </template>
5、router.js路由文件设置
检查好路由信息配置about.vue
const routes = [ { path: '/about', name: 'about', component: () => import('../views/About.vue') } ]
router.js 中设置mode: “history”
const router = new VueRouter({ mode: 'history', routes })
6、编译
npm run build
查看生成的文件：
dist/about/index.html
可以看到已经有内容了
参考:
Vue 预渲染实现方案
二、设置meta元信息
基于上面的配置，继续
1、安装插件
cnpm install vue-meta-info --save-dev
2、设置main.js
import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)
3、配置meta信息
<template> <div class="about"> <h1>这是about</h1> </div> </template> <script> export default { // 这些代码会转成网页的meta标签里的内容 metaInfo: { title: '关于我们', meta: [ { name: 'keywords', content: '关键字' }, { name: 'description', content: '网页描述' } ] } } </script>
4、编译查看，meta标签中已经有内容了
