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

最新推荐文章于 2023-09-14 15:24:29 发布
最新推荐文章于 2023-09-14 15:24:29 发布
阅读量131 收藏
点赞数
文章标签： 前端 vue.js nginx 搜索引擎 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35751194/article/details/129605644
版权

对于Vue前后端分离项目来说，要让搜索引擎抓取到页面，需要在nginx配置中加入以下内容:

  1. 使用 history 模式的路由，这样可以避免页面刷新导致404错误。

  2. 配置 try_files，使得所有路径都指向同一个入口文件，如index.html。

  3. 使用prerender-spa-plugin或者其他类似的插件，在构建时预渲染页面，使得搜索引擎能够抓取到静态页面。

  4. 设置meta标签，如 ，告诉搜索引擎可以索引和跟随链接。

  5. 在网站的根目录下放置sitemap.xml文件，

13572025090
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何将vue项目打包在服务器上使用nginx运行，并使用反向代理解决跨域问题
m0_67390379的博客
07-30 391
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。可以改用其他端口，但是改用其他端口不方便，因为使用域名访问的话默认就是80端口，所以我们要让nginx启动在80端口，把占用80端口的程序干掉就行了。打开配置文件可以发现，里面又一个一个的server对象组成（如下），我们每次增加一个项目增加一个server就行。...
nginx反向代理-解决前端跨域问题
diankaoli4837的博客
02-13 416
1.定义 跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。注意：跨域限制访问，其实是浏览器的限制。理解这一点很重要！！！ 2.跨域访问示例 假设有两个网站，A网站部署在：http://localhost:81 即本地ip端口81上；B网站部署在：http:/...
使用nginx反向代理实现vue项目打包部署上线
热门推荐
yw00yw的博客
02-28 1万+
在开发完成vue项目的时候，面临的问题就是打包部署。 打包很简单，只需要执行npm run build命令即可。 但是部署的时候需要使用nginx做反向代理，因为开发的时候我们使用的是webpack提供的proxyTable做的代理从而解决了开发环境的跨域请求问题。 使用nginx反向代理 根据前面写到的下载安装nginx服务器 配置nginx server { listen ...
Nginx反向代理部署前端Vue项目
can_chen的博客
05-05 9973
对于前后端分离的项目，前端项目和后端项目需要单独部署，通常会使用SpringBoot框架开发后端项目，使用Vue框架开发前端项目；后端项目的部署较为简单，一般来说就是先打成一个Jar包上传到服务器，然后使用 nohup java -jar Jar包名 & 命令启动项目即可；完整部署流程可参考文章：https://blog.csdn.net/can_chen/article/details/107225701 而对于前端Vue项目的部署，需要使用Nginx做反向代理，原因是开发的时候我们使用的是we
nginx+vue.js实现前后端分离的示例代码
11-30
1.nginx 是一个高性能的HTTP和反向代理服务器，常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快，可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的...
基于Vue+SpringBoot实现的前后端分离的仿小米商城项目后端源码(包含秒杀模块).7z
12-18
基于Vue+SpringBoot实现的前后端分离的仿小米商城项目后端源码(包含秒杀模块).7z 本项目是基于一个作者hai-27开发的补充。他是使用vue、node.js做的前后端分离项目。 我是对他的前端进行采用并进行修改，后端使用...
基于前端Vue后端.NetCore Web后台管理系统通用开本框架采用前后端分离技术，前端使用vue2.6.0，后端使用.net
05-23
基于前端Vue后端.NetCore Web后台管理系统通用开本框架采用前后端分离技术，前端使用vue2.6.0，后端使用.netcore3.1，支持跨平台、多租户、支持MySQL/SQLServer/Oracle多数据库，模块化设计，高性能，高颜值，不管是...
vue.js使用代理和使用Nginx来解决跨域的问题
11-27
使用Nginx 反向代理解决跨域问题（vue.js使用代理去掉vue.js因为跨域而触发的options请求） 我们的项目还是需要node.js作为容器的 一、Windows 下安装Nginx （官网下载稳定版http://nginx.org/en/download.html） 二...
Nginx 发布(部署) Vue 项目
卡尔特斯
08-24 1646
1、通过 npm run build 进行打包，获得 dist 文件夹 2、安装 Nginx 之后，并在配置文件中添加下面的 server 配置，专门针对 vue 的配置，注意调整根目录。 server { # 监听端口 listen 8088; # 主机名称 # server_name www.xyq.com; # 根目录 root /usr/local/var/vue/chunk/dist; # 匹配协议 location / { ..
nginx的简单配置
qq_43652793的博客
10-04 467
1，nginx的下载 http://nginx.org/en/download.html 选择第二个稳定版下载即可，下载好后解压得到如下目录 其中最主要的配置文件nginx.conf在conf文件夹中 简单介绍下几个nginx命令 start nginx 启动nginx nginx -s reload ：修改配置后重新加载生效 nginx -s reopen ：重新打开日志文件 nginx -t -c /path/to/nginx.conf 测试nginx配置文件是否正确 关闭ngin
前后端分离：使用Nginx实现跨域访问
sinat_37623490的博客
02-11 908
这是浏览器的同源策略：只有在地址的协议、ip、端口都一样情况下(同源)，才允许进行资源互访。若在不同源的情况下访问，就称为跨域。
vue前后端分离项目 前端使用的nginx部署，后端接口使用的nginx反向代理，如何才能让搜索引擎抓取到页面，详细步骤和教程...
weixin_42609225的博客
01-23 128
Vue前后端分离项目中，前端使用 Nginx 部署，后端接口使用 Nginx 反向代理时，要让搜索引擎抓取到页面，需要进行以下步骤： 配置 Nginx：在 Nginx 配置文件中配置前端页面的路径，使得搜索引擎可以访问到页面。 实现前后端路由同构：前端路由和后端路由要能匹配上，这样搜索引擎才能抓取到页面。 使用 prerender 或者 SSR：使用 prerender 或者 SSR 技术，...
Vue路由模式为history的项目部署到Nginx
李木有大本事的博客
07-29 353
Vue路由模式为history的项目部署到Nginx 描述：想把vue且路由模式为history的项目部署到Nginx 前置条件：router.js中base路径为/abc/efg 即在网页中的路径http://localhost:port/abc/efg 解决： 在打包配置文件中加入 module.export = { baseURL: '/abc/efg' } 在Nginx的default.conf文件中配置 server { location / {
vue 配置 nginx 监听接口 所有状态码
咳咳，请多指教
04-19 332
server { listen 80; server_name DataAnalysis; location / { if ($request_method = 'OPTIONS'){ add_header 'Access-Control-Allow-Origin' '*'; add...
Vue项目中Nginx配置及第三方模块添加采坑记
仰望星空的代码
11-22 2146
一般项目的前端工程都是在开发完毕并打包后交给后端或运维来部署，前端开发人员是两耳不闻部署事，一心只把UI画。正在开发的一个项目采用了前端人员自己部署打包好的前端文件并自己配置web服务器，web服务器采用的是高性能web服务器——Nginx。本文记录在使用Nginx过程中遇到的各种坑，比如Nginx的基本配置、作为反向代理服务器的配置、缓存的配置、读取环境变量的配置等等。
vue+nginx 跨域问题解决方案
qq_37597602的博客
03-05 1602
1.开发环境 vue解决跨域问题，访问spingboot后端接口只需要一个配置 在config文件夹中的index.js文件内修改如下： proxyTable: { '/api': {//定义全局访问后台服务器的别名 target: 'http://localhost:8080/project',//后端服务器访问地址 change...
nginx配置vue前端代理
最新发布
m0_55333789的博客
09-14 2478
nginx配置vue前端代理
Nginx篇 ：反向代理简单部署vue项目，注意事项及常用命令
weixin_73008860的博客
01-10 3191
Nginx反向代理部署前端vue项目，基础流程，注意事项，常用命令等
vue前后端分离项目 前端使用的nginx部署，后端接口使用的nginx反向代理，如何才能让搜索引擎抓取到页面
02-06
对于Vue前后端分离项目来说，要让搜索引擎抓取到页面，需要在nginx配置中加入以下内容: 1. 使用 history 模式的路由，这样可以避免页面刷新导致404错误。 2. 配置 try_files，使得所有路径都指向同一个入口文件，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值