vue开发网站seo优化方法，最新版

目前基于vue的方案是Nuxt.js，同类型的也有React版的Nuxt.js

所以服务端渲染就是尽量在服务器发送到浏览器前，页面上是有数据可让爬虫进行爬取

方法一、利用prerender-spa-plugin插件将单页面应用打包成多页面

---

公司里有的项目要进行一个非常重要的功能就是seo的优化，第一次遇到这个东西堵了一段时间，之后还去请教了好些人都没有得到好的解决办法。后来自己通过webpack和prerender-spa-plugin第三方插件这两个工具配合使用来实现曲线就救国。

问题描述

传统的vue通过vue-cli脚手架搭建完成后要通过npm run build来打包生成最后的要放到线上的html代码。

vue搭建的单页面项目有各种优点，易维护、代码简洁、开发体验好等等。但是对于一些传统的互联网公司，vue单页面却有一个很致命的问题就是seo优化的问题。下面是正常打包的vue单页面目录以及index.html的代码。

目录只有一个index.html文件并且这个html文件里面是没有任何内容的只有一个id为app的用来挂载vue实例的div。

谷歌搜索引擎已经可以很好地支持单页面的信息爬取，但是谷歌是国外的国内使用要翻墙所以不作考虑，百度是国内最主要的搜索引擎，百度并不能爬取单页面的数据所以这样的项目如果上线了别人在百度搜索的时候很难找到这个项目。由于我目前公司的大部分项目都是需要做seo优化的所以这个问题就丢到了我这里。

解决办法

这里先提一下如果打包的时候报错可能你需要npm安装一下puppeteer（这东西有点大大概300多M）

第一步通过prerender-spa-plugin来进行vue.config.js的配置

npm isntall prerender-spa-plugin --save

这个东西是vue用来将单页面应用打包成多页面的第三方插件，安装完成之后在vue.config.js配置配置如下

const PrerenderSPAPlugin = require(‘prerender-spa-plugin’);

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

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’),

// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。

routes: [‘/’,‘/about’,‘/store_vuex’,‘/cssAnimate’,‘/connectMongoDB’,‘/childParent’,‘/child1’,‘/elementUI’],

// 这个很重要，如果没有配置这段，也不会进行预编译

renderer: new Renderer({

inject: {

foo: ‘bar’

},

headless: false,

// 在 main.js 中 document.dispatchEvent(new Event(‘render-event’))，两者的事件名称要对应上。

renderAfterDocumentEvent: ‘render-event’

})

})

],

};

}

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V：vip1024c 备注前端获取（资料价值较高，非无偿）

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

• 

常用算法面试题：

• 

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

端面试题：**

• [外链图片转存中…(img-ydRiISS1-1711588419230)]

常用算法面试题：

• [外链图片转存中…(img-r3sCfTkj-1711588419231)]

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

•