vue怎么做seo优化？这份超详细指南请收好！

今儿个咱来聊聊咋用 Vue 搞 SEO，这事儿我之前也折腾过，还真有点心得体会能跟大伙儿分享分享。

我用 Vue 做个网站，心想着这玩意儿好用，界面炫酷，用户体验肯定结果，上线后发现搜索引擎根本不咋收录，流量少得可怜。这才意识到，Vue 这单页面应用（SPA）对 SEO 不太友

摸索阶段

咋办？我开始在网上到处找资料，发现大伙儿都说这 Vue 的 SEO 是个问题。主要原因是啥？因为 Vue 是在浏览器里用 JavaScript 动态渲染页面的，搜索引擎的爬虫来爬的时候，看到的可能就是个空白页面，啥内容也没有，那肯定不行。

然后我就继续查，发现有几种解决办法，什么预渲染、SSR 服务端渲染啥的。我一想，这 SSR 听起来就挺高级，肯定好使。但是，这玩意儿有点复杂，得改动不少代码，还得搭个 * 环境，我当时就有点打退堂鼓。

尝试预渲染

后来我发现个叫 prerender-spa-plugin 的插件，据说能把单页面应用打包成多页面。这玩意儿不用大改代码，我就赶紧试试。

第一步，安装插件：

在项目目录下，打开命令行工具，敲入这行代码：

npm install prerender-spa-plugin --save-dev

第二步，配置 Vue 的构建：

在 * 文件里（如果没有就新建一个），加上这些配置：

javascript

const PrerenderSPAPlugin = require('prerender-spa-plugin');

const Renderer = *;

* = {

// ...其他配置

configureWebpack: {

plugins: [

new PrerenderSPAPlugin({

staticDir: *(__dirname, 'dist'),

routes: ['/', '/about', '/contact'], // 这里写你要预渲染的路由

renderer: new Renderer({

// 渲染时的一些配置，比如设置 viewport 大小

renderAfterDocumentEvent: 'render-event', // 等待触发的事件，确保页面加载完成

第三步：在 * 里触发事件

app.$mount('#app');

*(new Event('render-event'))

配置好后，我重新打包网站，发现 dist 文件夹里多几个 HTML 文件，每个路由都有对应的 HTML。这下，搜索引擎的爬虫就能直接抓取到 HTML 内容，再也不怕是空白页。

进一步优化

用预渲染后，收录情况确实好多。但是，我还想更进一步，毕竟这 SEO 是个持续优化的过程。

• 我开始注意设置每个页面的 meta 标签，特别是 title 和 description，这俩对搜索引擎排名很重要。
• 我还搞个，把网站的所有链接都列出来，提交给搜索引擎，方便它爬取。
• 我还学习大家说的服务器渲染，现在也开始使用。

Vue 做 SEO 虽然有点麻烦，但只要找对方法，还是能搞定的。我现在这个网站，流量比以前好多，也算是没白折腾。