草庐IT

宝塔面板发布vue页面

SakuraCaslana 2023-03-28 原文

为什么使用宝塔面板?

新手建站最大的痛苦就是不好入门,代码太多,无法轻松管理。
在这里,我们介绍一种简单好用的免费服务器运维面板——宝塔面板。使用宝塔面板,可以在可视界面中为服务器安装应用、同步文件、定期执行代码、管理服务,非常方便。

前期准备

服务器+宝塔面板安装,我使用的是腾讯云服务器。下面一切都是一腾讯云为准

如果你是腾讯云服务器,官方提供了宝塔面板。可以在创建服务器时直接选择宝塔面板。

服务器操作

首先进入服务器详情页

点击进入防火墙面板

在这里我们需要开放两个端口一个是宝塔面板的默认端口 8888 ,还有一个是测试用的端口81或者其他端口。

点击确定即可

结果如图 注意:我把宝塔面板的默认端口改为了9000,第一次进入一定要是 8888

然后点击应用管理

首先看到用户名与密码

复制

sudo /etc/init.d/bt default

然后点击登录

进入控制台,粘贴指令并回车

可以看到用户名和密码,以及面板访问地址,我们访问面板外网地址

将控制台的用户名和密码复制过来登录

如果无法登录一直显示密码错误的,返回控制台,输入

sudo bt

根据提示修改密码和用户名,序号不需要括号

注意:修改一次后会自动退出bt命令,重新输入 sudo bt进入或者直接 sudo bt 序号

宝塔面板操作

第一次进入宝塔面板会让你绑定腾讯云账号和宝塔账号

宝塔账号手机注册即可

绑定腾讯云账号

进入服务器控制台,在个人头像的下拉菜单点击访问管理

点击最下方的访问密钥,可以看到三个密钥,按提示在宝塔绑定

宝塔面板提供了一些环境的安装,可以根据自己的需要进行安装

第一次进入会向你推荐安装,如果跳过了推荐安装,进入软件商店搜索,我们需要 nginx ftp php三个

正式开始建站

1.点击进入网站页面

我这里已经有了一个我自己的个人博客

点击添加站点

域名位置,目前其实就是起个名字,注意要是正确的域名格式,如结尾有 .com .cn等等。

选择创建FTP

PHP版本选择纯静态,因为我是纯静态vue-admin页面

网站分类随意

点击提交

2.点击刚刚建好的站点的设置按钮

直接就会进入域名管理,还记得我让你开放的81端口吗,我们现在就能用到了

我们再添加一个域名

你的服务器公网ip:81

可以不指定端口直接添加公网ip 使用默认的80端口,但我的80端口被占用了,且如果你需要建立多个网站,可以按照步骤,先开放一个端口然后在面板建站

成功之后我们直接删除,之前的域名 vue-admin.com

点击域名,会跳转到这个页面,说明建站成功

3.替换页面

点击刚刚建站的根目录 /www/wwwroot/你起的名字

点击上传

我选择的上传目录,根据你们的需要上传

上传成功后,回到网站,点击刚刚建立的网站设置

这次我们点击网站目录

点击文件夹图标,选择刚刚上传的目录,之前的文件可以删除,看自己情况

点击保存

访问

你的公网ip:81

页面替换成功

4.nginx反向代理

有的时候网站的后端接口往往会在其他服务器上,因此我们需要使用到 nginx的反向代理,我这里就进不去

还是点击设置找到反向代理

点击添加反向代理

代理名称必须有

缓存时间可选可不选 随意

代理目录需要开启高级功能,根据自己的项目修改。

目标url既是代理地址

添加成功后,再次访问

成功进入

我的项目是尚硅谷的vue-admin后台项目,尚硅谷的老师讲课认真,细致,幽默,尤其是超哥和禹哥

这里贴出他们的视频地址,想学习前端的小伙伴可以去看看

html5+css3 javascript vue2+vue3 vue2实战

有关宝塔面板发布vue页面的更多相关文章

  1. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  2. ruby-on-rails - 如何在发布新的 Ruby 或 Rails 版本时收到通知? - 2

    有人知道在发布新版本的Ruby和Rails时收到电子邮件的方法吗?他们有邮件列表,RubyonRails有一个推特,但我不想听到那些随之而来的喧嚣,我只想知道什么时候发布新版本,尤其是那些有安全修复的版本。 最佳答案 从therailsblog获取提要.http://weblog.rubyonrails.org/feed/atom.xml 关于ruby-on-rails-如何在发布新的Ruby或Rails版本时收到通知?,我们在StackOverflow上找到一个类似的问题:

  3. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  4. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

  5. ruby-on-rails - prawnto 显示新页面时不会中断的表格 - 2

    我有可变数量的表格和可变数量的行,我想让它们一个接一个地显示,但如果表格不适合当前页面,请将其放在下一页,然后继续。我已将表格放入事务中,以便我可以回滚然后打印它(如果高度适合当前页面),但我如何获得表格高度?我现在有这段代码pdf.transactiondopdf.table@data,:font_size=>12,:border_style=>:grid,:horizontal_padding=>10,:vertical_padding=>3,:border_width=>2,:position=>:left,:row_colors=>["FFFFFF","DDDDDD"]pdf.

  6. ruby - 每个页面上的 Jekyll 分页 - 2

    据我们所知,Jekyll默认分页仅支持index.html,我想创建blog.html并在那里包含分页。有什么解决办法吗? 最佳答案 如果您创建一个名为/blog的目录并在其中放置一个index.html文件,那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板,而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b

  7. ruby-on-rails - RoR && "coming soon"页面 - 2

    我正在寻找一种简单的方法来为我在RubyonRails上的项目实现简单的“即将推出”(预启动)页面。用户应该能够留下电子邮件以便在项目启动时收到通知。有没有这样的插件\gem?或者我应该自己做... 最佳答案 LaunchingSoon是一个Rails插件。它还集成了MailChimp或Campaignmonitor. 关于ruby-on-rails-RoR&&"comingsoon"页面,我们在StackOverflow上找到一个类似的问题: https:/

  8. ruby - 如何让 GitHub 页面使用 master 分支? - 2

    我有一个使用Jekyll托管在GitHub上的静态网站。问题是,我真的不需要master分支,因为存储库唯一包含的是网站。这样我就必须gitcheckoutgh-pages,然后gitmergemaster,然后gitpushorigingh-pages。有什么简单的方法可以摆脱gh-pages分支并直接从master推送? 最佳答案 Theproblemis,Idon'treallyneedthemasterbranch,astheonlythingtherepositorycontainsisthewebsite.Isthere

  9. ruby - 如何设置 Mechanize 页面编码? - 2

    我试图通过点击一个链接获得一个带有ISO-8859-1编码的页面,所以代码类似于这样:page_result=page.link_with(:text=>'link_text').click到目前为止,我得到的结果编码错误,所以我看到的字符如下:'T�tulo:'insteadof'Título:'我尝试了几种方法,包括:使用代理在第一个请求中声明编码:@page_search=@agent.get(:url=>'http://www.server.com',:headers=>{'Accept-Charset'=>'ISO-8859-1'})说明页面本身的编码page_result.

  10. ruby-on-rails - 获取 ActionController::RoutingError(当尝试使用 AngularJS 将数据发布到 Rails 服务器时,没有路由匹配 [OPTIONS] "/users" - 2

    尝试从我的AngularJS端将数据发布到Rails服务器时出现问题。服务器错误:ActionController::RoutingError(Noroutematches[OPTIONS]"/users"):actionpack(4.1.9)lib/action_dispatch/middleware/debug_exceptions.rb:21:in`call'actionpack(4.1.9)lib/action_dispatch/middleware/show_exceptions.rb:30:in`call'railties(4.1.9)lib/rails/rack/logg

随机推荐