Vue项目SEO优化的另一种姿态

优速盾-小U • 2024年2月6日 18:36 • 网站百科 • 阅读 269

背景：当前项目首页和登陆后的平台在一个项目里，路由采用hash模式，现在要做SEO优化，这时候同构SSR(Server Side Rendering)服务端渲染代价显然太大，影响范围比较广，同样更改当前项目路由为history模式采用预渲染(Prerending)代价也不小。最终决定将首页单独出一个项目采用预渲染，然后用nginx代理来实现两个项目之间的跳转。

同构SSR服务端渲染这里就不多赘述了，说一下预渲染：

一、什么情况下用预渲染比较好

官方文档建议：如果你调研服务器端渲染(SSR)只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

二、选用插件

三、插件的使用

vue-cli3 webpack配置

在vue.config.js中：

这里只在 process.env.NODE_ENV === ‘production’的时候进行预渲染，输入目录为 process.env.VUE_APP_OUTPUT_DIR，是在.env .env.prod .env.test等全局环境变量中配置的，可以根据不同环境打包，如.env.prod的配置为：

这里的VUE_APP_PROJECT_URL稍后再做解释。

以上的new PrerenderSPAPlugin({})配置中删除了

目的是为了不打开chromium浏览器。

在main.js中配置：

vue-meta-info安装使用：

如果你的title或者meta是异步加载的，那么你可能需要这样使用

三、项目间跳转配置

现在说一下VUE_APP_PROJECT_URL这个变量，这个变量便是两个项目间跳转的关键。在本地开发中，可以通过设置.env中的变量：

然后通过window.location.href的方式进行两个本地项目之间的跳转：

至于线上怎么进行跳转，可以这么配置.env.prod中的变量：

然后在nginx中配置：

### 默认进入的项目 ### server { listen 30002; server_name xxx.xx.xxx.xxx; proxy_buffer_size 8k; proxy_buffers 8 32k; set $root /var/www/page-for-seo/dist-prod; root $root; index index.html index.htm index.php; error_log /var/nginx/logs/error.log error; access_log /var/nginx/logs/access.log; #access_log off; ### 客户端请求错误处理 ### error_page 403 404 /404.html; location = /404.html { return 404 'Sorry, File not Found!'; } ### 服务端请求错误处理 ### error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } ### 静态资源有效期 ### location ~ .*\.(jpeg|png|jpg|gif)$ { expires 1d; } ### 匹配所有请求 ### location / { try_files $uri $uri/ /index.php?$query_string;  } ### 匹配 platform/ 然后进行代理 ### location ^~ /platform/ { 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_pass http://xxx.xx.xxx.xxx:30012/;  } } ### 要进行跳转的项目 ### server { listen 30012; server_name xxx.xx.xxx.xxx; proxy_buffer_size 8k; proxy_buffers 8 32k; set $root /var/www/platform/dist-prod; root $root; index index.html index.htm index.php; error_log /var/nginx/logs/error.log error; access_log /var/nginx/logs/access.log; #access_log off; ### 客户端请求错误处理 ### error_page 403 404 /404.html; location = /404.html { return 404 'Sorry, File not Found!'; } ### 服务端请求错误处理 ### error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } ### 静态资源有效期 ### location ~ .*\.(jpeg|png|jpg|gif)$ { expires 1d; } ### 匹配所有请求 ### location / { try_files $uri $uri/ /index.php?$query_string;  } }