本地部署element-plus文档

文章讲述了由于频繁访问element-plus官方文档遇到的503或404错误,作者选择通过本地部署Tomcat服务器来解决这个问题。具体步骤包括下载并安装Tomcat9,获取element-plus的gh-pages分支文档,将其解压到Tomcat的webapps目录下,配置服务器.xml文件以设置访问路径,最后通过更改端口号并重启Tomcat服务实现顺利访问。
摘要由CSDN通过智能技术生成

由于一直使用的前端组件element-plus,所以需要经常看文档,但无奈官网实在不给力,经常报503或者404,大大影响效率和心情,忍无可忍就本地化部署一套解决此问题。

百度了一下大多数都是使用 vscode的live server, 或者放到服务器上, 均可使用。

因为我自己测试需要访问很多文件或者视频资源,所以在本地搭建了一个tomcat服务器,不用上传到服务器,不用担心被删掉

1. 安装tomcat9.0或者其他版本均可

下载地址: Apache Tomcat® - Apache Tomcat 9 Software Downloads

 注意下载安装版本,这样方便知道tomcat的运行状态,也可以配置开机启动。

 2.下载element-plus文档

下载地址: https://github.com/element-plus/element-plus/tree/gh-pages

 或者gitee:  element-plus: 🎉 Vue 3 的桌面端组件库 - Gitee.com

 注意选分支 >>>  gh-pages  <<<,不要选择其他分支

 

3, 解压到tomcat的安装目录webapps下

记住只有一个element-plus文件夹

 

 4,配置访问路径

如果不配置访问路径,直接访问 http://localhost:8080/element-plus/index.html

会出现404

打开 conf/server.xml文件,

加上这一段 ,可以顺便把端口号8080改一下任意端口,

 配置完成后保存,然后鼠标右键任务栏的tomcat图标,先stop service, 再start service重启tomcat服务,

5,访问

地址栏访问:   http://localhost:8088/index.html

会自动跳转到http://localhost:8088/zh-CN/

即可打开element-plus页面,访问飞快

 出现上面弹窗,点击取消

  • 7
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在Nginx上部署Element Plus离线文档,您需要按照以下步骤进行操作: 1. 首先,将Element Plus的离线文档文件(一般为一个包含HTML、CSS和JavaScript文件的静态网页文件夹)下载到您的服务器上。 2. 在Nginx配置文件中添加一个新的服务器块(server block)来处理Element Plus的请求。您可以通过编辑Nginx配置文件(一般位于/etc/nginx/nginx.conf或/etc/nginx/conf.d目录中)来完成此操作。确保您有适当的权限来编辑该文件。 3. 在新的服务器块中,指定与Element Plus文档相关的请求路径。例如,您可以使用"location"指令来匹配Element Plus文档的URL路径。 4. 在该位置块中,指定要用于Element Plus文档的文件夹路径。您可以使用"root"指令来指定文件夹的路径。确保您提供的路径正确,并且包含Element Plus文档的所有文件。 5. 配置您的域名和端口号。您可以使用"server_name"指令来指定您想要使用的域名(如果有的话),并使用"listen"指令来指定Nginx监听的端口号。如果您不指定域名,Nginx将使用服务器的IP地址作为默认域名。 6. 保存并关闭配置文件,并测试您的配置是否正确。您可以使用"nginx -t"命令来测试Nginx配置文件的语法。如果一切正常,您将看到一个"Syntax ok"的输出。 7. 重启Nginx服务以使配置更改生效。您可以使用"systemctl restart nginx"命令来重启Nginx服务。 8. 现在,您可以通过在浏览器中输入您配置的域名或IP地址,加上Element Plus文档的请求路径来访问Element Plus离线文档。 按照上述步骤,您应该能够成功地在Nginx上部署Element Plus离线文档。如果您遇到任何问题,请确保检查您的配置文件是否正确,并参考Nginx文档以获取更多帮助。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值