vue SEO

一。本人主要是在不改动SPA单页面的情况下,专门针对爬虫进行处理,从而完成SEO。

使用工具:puppeteer、nginx。

puppeteer:主要用于生成完整的HTML页面。完整代码:https://gitee.com/huangzuomin/get-html.git

nginx:用于代理设置。

server {
		 
	     fastcgi_intercept_errors on;# 开启支持错误自定义
		 
         listen 8082;
         server_name  localhost;

		 location / {
		   proxy_set_header  Host            $host:$proxy_port;
           proxy_set_header  X-Real-IP       $remote_addr;
           proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
	  
          if ($http_user_agent ~* (Baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator|bingbot|Sosospider|Sogou Pic Spider|Googlebot|360Spider|Sogou web spider|Sogou inst spider|Sogou spider|Sogou wap spider)){
             proxy_pass http://puppeteerServer; # 地址是开启的服务地址
          } 
		 
		   root C:/Users/hzm/Desktop/project/qnsj/quark-h5/dist/;
           index index.html;
		   try_files $uri $uri/ /index.html;
		 }
    }

二:说明:直接通过上面地址或者完整代码后,发布出去。然后将nginx里面的服务地址进行替换即可。主要是通过判断是不是各平台的蜘蛛,如果是则走pupoeteer 服务返回完整的HTML,否则返回SPA页面。

  • vue-router 使用history 模式。刷新的时候回出现找不到页面的情况。通过nginx 设置。当返回404的时候,直接返回默认的index.html 即可
### 配置 Nginx 实现 Vue 项目 SEO 优化 在 Vue 项目中,单页面应用(SPA)由于其动态渲染的特性,对搜索引擎爬虫并不友好。为了优化 SEO,可以使用 Nginx 配合 Puppeteer 或其他服务端渲染技术实现静态化或预渲染[^2]。以下是具体的配置方法: #### 1. 修改 Vue Router 的模式 默认情况下,Vue Router 使用的是 `hash` 模式,搜索引擎通常不会抓取 `#` 后面的内容。因此,需要将路由模式改为 `history` 模式。 在 `router/index.js` 文件中修改如下: ```javascript export default new Router({ mode: 'history', // 将 mode 设置为 history base: process.env.BASE_URL, routes: [] }); ``` 同时,在服务器端需要配置反向代理以支持 `history` 模式下的路径重定向[^4]。 #### 2. 配置 Nginx 支持 Vue 项目 Nginx 需要配置为将所有未匹配到静态文件的请求重定向到 `index.html`,从而让 Vue Router 处理这些路径。 以下是一个典型的 Nginx 配置示例: ```nginx server { listen 80; server_name your-domain.com; root /path/to/your/vue/dist; # Vue 构建后的静态文件目录 index index.html; location / { try_files $uri /index.html; # 重定向到 index.html } # 可选:如果需要配合 Puppeteer 提供预渲染功能 location /puppeteer { proxy_pass http://localhost:3000; # 假设 Puppeteer 服务运行在本地 3000 端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } } ``` #### 3. 结合 Puppeteer 实现预渲染 对于需要 SEO 的页面,可以通过 Nginx 转发请求到 Puppeteer 服务,由 Puppeteer 模拟浏览器渲染页面并返回 HTML 内容。这种方式特别适合动态生成内容较多的场景[^2]。 Puppeteer 服务的基本工作流程如下: 1. 接收来自 Nginx 的请求。 2. 使用 Puppeteer 打开目标页面并等待页面加载完成。 3. 将渲染后的 HTML 返回给 Nginx,最终返回给客户端或搜索引擎爬虫。 #### 4. 静态化方案(可选) 如果项目内容较少更新,也可以考虑使用 `prerender-spa-plugin` 插件进行预渲染。该插件会在构建时生成静态 HTML 文件,适用于博客、介绍性官网等场景[^1]。 安装和配置步骤如下: ```bash npm install prerender-spa-plugin --save-dev ``` 在 `vue.config.js` 中添加配置: ```javascript const PrerenderSPAPlugin = require('prerender-spa-plugin'); const path = require('path'); module.exports = { configureWebpack: { plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), // 构建输出目录 routes: ['/', '/about', '/contact'], // 需要预渲染的路径 }), ], }, }; ``` ### 注意事项 - 如果选择 Puppeteer 方案,需确保服务器性能足够支持额外的计算负载。 - 对于静态化方案,若内容频繁更新,则需要重新构建项目以生成新的静态文件[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值