Vue单页应用转换为多页面应用

前言

最近用Vue2写了一个公司官网，写完后打包部署线上。使用百度收录，提交链接，爬取也正常。但是一直未被收录。搜索引擎一直搜索不到。Meta的关键字、描述也都添加了。但是title是固定的。

解决流程

添加动态标题

接下来处理动态标题问题，使用插件："vue-wechat-title": "^2.0.7",

第一步：安装插件
npm vue-wechat-title --save

第二步：在main.js全局引入、使用插件
import VueWechatTitle from 'vue-wechat-title' //动态修改title
Vue.use(VueWechatTitle);

第三步：在通过路由的mate属性携带title
const routes = [{
        path: '/login',
        component: () =>
            import ('@/views/login'),
        meta: {
            title: '登录'
        }
    },
    {
        path: '/404',
        component: () =>
            import ('@/views/404'),
        meta: {
            title: '错误'
        }
    }]

第四步：在App.vue里面使用插件
<div id="app">
    <router-view v-wechat-title="$route.meta.title" />
</div>

动态标题是出来了，但是查看源代码，title其实没有变,而且内容不够丰富，不被百度搜索引擎收录。

单页面应用向多页面应用转换

继续百度查找原因和解决办法。

Vue采用的是单页应用，单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

因为页面是交互的时候动态渲染的，所以爬虫爬取的时候爬取不到足够的内容。

没办法，接下来只能想办法把单页面应用转换成多页面应用了

一番搜索后发现两种方法

1、服务端渲染

vue.js官网提供的 SSR（服务端渲染），这是一种完美的解决方案，用官方的话说你不需要服务器，但是仍能获得 SEO 的好处，这是因为 Nuxt 将预先渲染所有页面，并且包括必要的 HTML。此外，你可以轻松地将生成的页面部署到 Netlify 或 GitHub pages 上。

但是这种方案呢学习成本高，对于刚开始的新手来说可能有点难度，基本还得重构项目。感兴趣的同学可以去官网去学习使用，以下是Nuxt.js官网链接：Nuxt.js - Vue.js 通用应用框架 | Nuxt.js 中文网。

2、第三方插件

使用插件 prerender-spa-plugin进行页面的预渲染。

2.1、安装

# 切换到淘宝源  否则下载速度很感人
npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
npm i puppeteer
npm i prerender-spa-plugin --save -dev

2.2、路由模式切换

router.js [路由模式] 必须是history 即：mode : ‘history’,

3.2、在vue.config.js配置

configureWebpack: (config) => {
    config.plugins.push(
        new PrerenderSPAPlugin({
            staticDir: path.join(__dirname, './jrweb'),
            // 需要进行预渲染的路由路径
            //**坑1，预渲染必须是静态页面，无接口调用**
            routes: [
                '/',
                '/gi',
                '/ps',
                '/sr',
                '/cj',
                '/cu',
                '/detail',
                '/detail/lz',
                '/detail/hj',
                '/detail/hs',
                '/detail/sh'
            ],
            // html文件压缩
            minify: {
                minifyCSS: false, // css压缩
                removeComments: false // 移除注释
            },
            renderer: new Renderer({
                inject: {
                    foo: 'bar'
                },
                // 在 main.js 中 new Vue({ mounted () {document.dispatchEvent(new Event('render-event'))}})，两者的事件名称要对应上。
                renderAfterTime: 5000, //触发渲染的时间，用于获取数据后再保存渲染结果
                // headless: false,   //使用jenkins自动化部署不可以使用headless
                renderAfterDocumentEvent: 'render-event',
                renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
                    //这样写renderAfterTime生效了
                    renderAfterTime: 5000
                }),
                args: ['--no-sandbox', '--disable-setuid-sandbox']
            })
        })
    )
}

2.4、main.js配置

添加mounted配置

new Vue({
  mounted() {
    document.dispatchEvent(new Event('render-event'))
  },
  el: '#app', router, render: h => h(App)
})

配置完成后npm run build 打包就可以把页面预渲染出来

问题：

1、路由/detail/:id?包含动态参数，无法渲染。需要单独配置。暂时没想到更好的方法。

2、预渲染必须是静态页面，无接口调用没有具体测试