Vue 3配置prerender-spa-plugin 预渲染（优化页面SEO）【亲测简单】

绝地灬酷狼 2024-03-25 19:42 44阅读 0赞

`Wish today！！！`  
关于我为什么一上来就要说这句话！  
这个事还得从很久很久以前说起。

那天我看到一只鸡穿着背带裤打着… 呸。。。 不好意思，说错了。

这事还是因为某天，我使用Vue3的版本做了个小商场网站。

后来上线后，才发现没有被baidu收录！

这意味着，没有收录后，用户就不能从百度搜到我的网站。

后来查到vue有个预渲染这个插件，就是`prerender-spa-plugin`

后来在网山查找了大量文章，都是vue2的，用不了我的vue3，甚至还有的标题写着`vue3配置prerender-spa-plugin`的，打开内容是vue2的文章，真实太可气了！！

![在这里插入图片描述][dd6b62fffefb422b80c9f286686e6722.png]

有的还需要fq去下载谷歌的无头浏览器`headless`

无意中找到了一篇文章`https://blog.csdn.net/weixin_51357044/article/details/126516287`解决了vue3的问题。

### 解决问题 ###

一行命令，一个配置就解决此问题了。

npm i prerender-spa-plugin-next --save

vue.config.js

const {
         defineConfig } = require('@vue/cli-service')
    
    // vue.config.js
    const path = require("path");
    // 预渲染
    const PrerenderSPAPlugin = require('prerender-spa-plugin-next');
    
    module.exports = defineConfig({
        
      transpileDependencies: true,
      //关闭语法检测
      lintOnSave: false,
    
      // prerender-spa-plugin-next预渲染
      configureWebpack: {
        
        plugins: [
          new PrerenderSPAPlugin({
        
            // 需要预渲染的页面，跟router路由一致
            routes: [ '/', '/test' ],
          })
        ]
      }
    
    })

vue3在路由里面需要设置

const router = createRouter({
        
        // 这里跟Vue2不一样！Vue2这里要改成 mode：‘history’，但是！Vue3这块是这样用的。
        history:createWebHistory(),
        routes
    })

编译后的vue文件目录  
![在这里插入图片描述][a0d84824d82b4efdb558acbf3d1e698f.png]  
每个页面都有编译好的html代码  
![在这里插入图片描述][68330d33e5734b5fb0db5e27009bcf2c.png]

![在这里插入图片描述][8d8513d9161249e0aa3ec4a1f77e081a.png]  
![在这里插入图片描述][38a9371af2b94250b42bba364a83a119.png]  
还可以路由传值  
![在这里插入图片描述][79bcb74072f5498fb4b3ebc1e8c98243.png]

### 完整的配置 ###

index.vue

test.vue

<template>
        <div>
            第2个页面，测试页{
        {
        this.$route.params.name == null ? '' : '，你好穿个参数，我的名字叫：'+this.$route.params.name}}
        </div>
    </template>
    
    <script>
    
    </script>
    
    <style scoped>
    
    </style>

router.js

// 引入路由，相关说明如下
    // createWebHashHistory：url地址栏有#/号
    // createWebHistory：url地址栏没有#/号
    import {
        createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
    
    const routes = [
        {
        
            path: '/',
            name: 'index',
            component: () => import('@/views/index/index')
        },
        {
        
            path: '/test',
            name: 'test',
            component: () => import('@/views/test/test')
        },
        {
        
            path: '/test/:name',
            name: 'test-name',
            component: () => import('@/views/test/test')
        }
    ]
    
    const router = createRouter({
        
        // 这里跟Vue2不一样！Vue2这里要改成 mode：‘history’，但是！Vue3这块是这样用的。
        history:createWebHistory(),
        routes
    })
    
    export default router

main.js

import {
         createApp } from 'vue'
    import App from './App.vue'
    import router from '@/router'
    
    createApp(App).use(router).mount('#app')

vue.config.js

![在这里插入图片描述][9d989776c1f54351a773ba11ba50c634.png]  
参考文章：[https://blog.csdn.net/weixin\_51357044/article/details/126516287][https_blog.csdn.net_weixin_51357044_article_details_126516287]

顺便说一下，国内又一款开源软件Wall，搭建特别简单，可以搭建个人照片墙和视频墙，有兴趣可以看下教程：[https://blog.csdn.net/u014641168/article/details/129396364][https_blog.csdn.net_u014641168_article_details_129396364]

[dd6b62fffefb422b80c9f286686e6722.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/fc68910b655d4474961ecb82b3e700c0.png
[a0d84824d82b4efdb558acbf3d1e698f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/6e915719823045008f1cc14d2a73cf78.png
[68330d33e5734b5fb0db5e27009bcf2c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/631461de543b42e1856da7667023bcbd.png
[8d8513d9161249e0aa3ec4a1f77e081a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/32f81d535d2542d5841f73a0acc0fb74.png
[38a9371af2b94250b42bba364a83a119.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/dd2c0dcc15c64ad7a47934eccddcf97e.png
[79bcb74072f5498fb4b3ebc1e8c98243.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/e49fa71b23594ea39903cc604af663bb.png
[9d989776c1f54351a773ba11ba50c634.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b362036307624332b271243c8fc0d3f3.png
[https_blog.csdn.net_weixin_51357044_article_details_126516287]: https://blog.csdn.net/weixin_51357044/article/details/126516287
[https_blog.csdn.net_u014641168_article_details_129396364]: https://blog.csdn.net/u014641168/article/details/129396364