首页vue前后端分离项目前端使用的nginx部署，后端接口使用的nginx反向代理，如何才能让搜索引擎抓取到页面

vue前后端分离项目前端使用的nginx部署，后端接口使用的nginx反向代理，如何才能让搜索引擎抓取到页面

时间: 2023-02-09 19:01:19 浏览: 132

反向代理Nginx

Nginx反向代理 server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; root E:\yuehou\git\web-h5\dist; location / { try_files $uri $uri/ /index.html; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} }

对于Vue前后端分离项目来说，要让搜索引擎抓取到页面，需要在nginx配置中加入以下内容: 1. 使用 history 模式的路由，这样可以避免页面刷新导致404错误。 2. 配置 try_files，使得所有路径都指向同一个入口文件，如index.html。 3. 使用prerender-spa-plugin或者其他类似的插件，在构建时预渲染页面，使得搜索引擎能够抓取到静态页面。 4. 设置meta标签，如 <meta name="robots" content="index,follow">，告诉搜索引擎可以索引和跟随链接。 5. 在网站的根目录下放置sitemap.xml文件，告诉搜索引擎网站上可以爬取的页面。以上是一些基本的方法，可以通过这些步骤来优化前后端分离项目的SEO。

阅读全文