网友回复
有两款插件推荐使用
一、prerender-spa-plugin
npm install prerender-spa-plugin --save vue.config.jsconst PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer // eslint-disable-next-line no-unused-vars const webpack = require('webpack') 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'), // outputDir: path.join(__dirname, './'), // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。 routes: ['/testData', '/contact'], // 这个很重要,如果没有配置这段,也不会进行预编译 renderer: new Renderer({ inject: { //默认挂在window.__PRERENDER_INJECTED对象上,可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值 foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event'//等到事件触发去渲染,此处我理解为是Puppeteer获取页面的时机 }) }) ] } }, }
staticDir 指的是预渲染输出的页面地址,
routes 指的是需要预渲染的路由地址,
renderer 则是所采用的渲染引擎是什么,目前用的是 V3.4.0 版本支持 PuppeteerRenderer。
inject 则是预渲染过程中都能拿到的值,该值提供给你了机会,让你觉得是否渲染这部分代码。例如下面的代码,是不会被预渲染进 HTML 中的。showMessage(){ if(window.__PRERENDER_INJECTED && window.__PRERENDER_INJECTED.foo =='bar') return; this.message = '我是测试预加载拦截'; }renderAfterDocumentEvent 这个则很关键,这个是监听 document.dispatchEvent 事件,决定什么时候开始预渲染 main.js
new Vue({ router, store, render: h => h(App), //添加到这里,这里的render-event和vue.config.js里面的renderAfterDocumentEvent配置名称一致 mounted () { document.dispatchEvent(new Event('render-event')) } }).$mount('#app')
然后就是npm run build打包
1. router.js里面把mode要为'history',hash模式会打包的时候生成同样的页面,所以一定要history
2.打包之后上传到服务器才可以看到效果,或者本地自己创建一个服务
这样dist的文件夹目录结构就会变成如下的样子
就是打包之后,每个路由都会打包成一个文件夹,都有一个对应的静态 HTML; 每一个 HTML 内除了<div id="app"></div>这个 Vue 的挂载元素外,还有静态的标签内容。
<body> <div id="app"> <div data-v-fa8a7bc4="" class="app-wrapper openSidebar"> <section data-v-2c0baa24="" data-v-fa8a7bc4=""> <div data-v-2c0baa24=""> <div aria-label="Breadcrumb" role="navigation" class="el-breadcrumb"><span class="el-breadcrumb__item"><span role="link" class="el-breadcrumb__inner is-link">首页</span><span role="presentation" class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item"><span role="link" class="el-breadcrumb__inner">活动管理</span><span role="presentation" class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item"><span role="link" class="el-breadcrumb__inner">活动列表</span><span role="presentation" class="el-breadcrumb__separator">/</span></span><span class="el-breadcrumb__item" aria-current="page"><span role="link" class="el-breadcrumb__inner">活动详情</span><span role="presentation" class="el-breadcrumb__separator">/</span></span></div> </div> </section> </div> </div> <script src="config/config.js"></script> <script src="/static/js/chunk-vendors.cb183907.js"></script> <script src="/static/js/app.83e704ba.js"></script> </body>遇到的问题
1.本地起服务测试,会发现能正常运行,但是做了优化的页面刷新之后会没有样式
造成问题的原因就是打包的时候vue.config.js的资源路径配置不对没有优化之前的路径是
publicPath: './',打包之后路由下面的资源路径是这样的
解决办法优化之后的路径是
publicPath: '/',打包之后的路由下面的资源路径是这样的
就是路径前面多了一个/,采用了绝对路径这个时候需要一个服务来测试
1.全局安装node.js2.安装成功后,执行npm install anywhere -g 安装anywhere,
ok,那么怎么为这些打包的静态页面分配title和meta标签?需要用到 vue-meta-info
二、vue-meta-info
npm install vue-meta-info --save
main.js里面引入vue-meta-info
import MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)这样在组件页面中就可以使用了 假设你要给contact.vue添加title,meta标签 contact.vue
<template> ... </template> <script> export default { metaInfo: { title: '我是contact头', // set a title meta: [{ // set meta name: 'keyWords', content: '我是contact关键字' }, { name: 'description', content: '我是contact描述' }], link: [{ // set link rel: 'asstes', href: 'https://assets-cdn.github.com/' }] } } </script>这样再结合prerender-spa-plugin,打包之后,在dist文件夹找到contact文件夹下的index.html 打开你会发现就有title和meta的关键字和描述标签了