有两款插件推荐使用
一、prerender-spa-plugin
npm install prerender-spa-plugin --savevue.config.js
const 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的关键字和描述标签了
网友回复
我知道答案，我要回答
私活外包
