最近公司运营提出了问题，为什么页面查看源代码什么都没有，这样是不行的，蜘蛛抓取不到的，网站权重太低，改！
vue对seo不友好。
ssh，预渲染，nuxt。考虑到我网站需要展现的页面也并不是很多，并且大多是静态的，就选择了预渲染（其实是这个看起来最好实现，哈哈）
下载prerender-spa-plugin
cnpm install prerender-spa-plugin --save
在main.js里添加：
new Vue({
el: '#app', router,
store, components: { App },
template: '<App/>',
mounted () {
document.dispatchEvent(new Event('render-event'))
}
})
build/webpack.prod.conf.js---------->引入prerender-spa-plugin
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
ok,下面就是配置了
但是，这里要知道预渲染必须设置路由为history模式。否则编译出来的页面是一样的。这里又分为两种情况，例如：项目部署在根目录下：http://localhost/homeIndex
非根目录下：http://localhost/school/homeIndex
项目部署在根目录下
export default new Router({
mode:"history",
routes: []
……
config/index.js-------->确保assetsPublicPath为‘/’
build: {
index: path.resolve(__dirname, '../dist/index.html'),
// Paths assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
build/webpack.prod.conf.js---------->plugins:[ ]
new PrerenderSPAPlugin({ // 生成文件的路径，这个目录只能有一级。若目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动 staticDir: path.join(__dirname, '../dist'), // 对应自己的路由文件 routes: ['/','/debugDesign'], // 若没有这段则不会进行预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。 renderAfterDocumentEvent: 'render-event' }) }),
这里执行命令：
npm run build
你会看到项目目录dist文件夹里是这样的结构
但是现在打开index.html则会使一片空白，这是因为路由配置了history模式，需要后端的配合，我这里用nginx启动本地服务器
server {
listen 80;
server_name localhost;
location / {
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
启动nginx打开80端口就成了
没有问题，运行成功
预渲染也成功
第二种是不在根目录下的情况
config/index.js------->
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist/school'),
assetsSubDirectory: 'static',
assetsPublicPath: '/school/',
build/webpack.prod.conf.js---------->
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, '../dist'),
routes: ['/','/school/debugDesign'],
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
}),
router/index.js---------->
export default new Router({
mode:"history",
base: "/school/",
routes: [
打包 npm run build 生成目录如下：
niginx配置：
location /school/ {
index index.html index.htm;
try_files $uri $uri/ /school/index.html;
}
打开http://localhost/school/homeIndex
同时可以配合vue-meta-info设置页面的TDK，但是发现我设置了某个页面的title为“这是一个title”之后，进入这个页面，title会变成“这是一个title”，但是到其他未设置的页面title还是这样，暂未解决这个情况。
以上是经过我自己的实践写的，刚工作所以很多也不懂，如有错误欢迎指出啦。。。。。。
