宝塔面板 -- 打包前端项目并部署提升访问速度

文章目录

  • 前言
  • 一、打包前端项目
  • 二、添加PHP项目
  • 三、部署打包文件
  • 四、开通防火墙
  • 五、运行网站
  • 总结


前言

在前面写到的文章使用宝塔面板部署前端项目中,并没有将前端项目打包而是直接部署,导致网站访问速度非常慢,加载甚至要十几秒。因此,为了提高访问速度,最有效的方法就是先打包好,然后再去部署,从而实现了1秒打开网站。


一、打包前端项目

1、打开要部署的前端项目

2、打开命令窗口,输入:npm run build  回车运行打包前端

3、复制已经打包好的文件dist,放在一个的文件夹里面准备之后使用

我就复制在d盘里面并且压缩


 

二、添加PHP项目

1、点击宝塔面板左侧的网站

2、点击PHP项目里面的添加站点

3、成功后点击设置

4、将刚才的域名删除即可


三、部署打包文件

1、点击左侧文件选项,找到刚才域名文件夹

2、在域名文件夹里面上传刚才打包好的dist文件,双击解压

3、点击左侧网站,点击刚才的设置,找到默认文档

4、添加dist则网站部署完成


四、开通防火墙

1、点击左侧安全,添加项目端口

2、添加端口、点击提交

3、打开服务器安全组,也同样添加端口


五、运行网站

1、公网ip+端口访问

2、访问成功!


总结

打包部署分为以下几步:

  • 一、打包前端项目

  • 二、添加PHP项目

  • 三、部署打包文件

  • 四、开通防火墙

  • 五、运行网站

如果这篇文章对你有帮助的话请点点赞和收藏。如果文章有问题的话也可以私信我或指出来!!!

感谢你的支持!!!

最近更新

  1. TCP协议是安全的吗?

    2024-04-03 07:36:05       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-03 07:36:05       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-03 07:36:05       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-03 07:36:05       20 阅读

热门阅读

  1. 若依框架:角色权限

    2024-04-03 07:36:05       16 阅读
  2. 如何使用springcloud LoadBalancer代替ribbon

    2024-04-03 07:36:05       19 阅读
  3. WebKit结构简介

    2024-04-03 07:36:05       15 阅读
  4. HTML表单

    2024-04-03 07:36:05       16 阅读
  5. DAY13|239.滑动窗口的最大值,347.前 K 个高频元素

    2024-04-03 07:36:05       15 阅读
  6. 开发Vue组件库

    2024-04-03 07:36:05       15 阅读
  7. css预编译sass,css也可以变得优雅

    2024-04-03 07:36:05       16 阅读
  8. head和body引入js的问题

    2024-04-03 07:36:05       16 阅读
  9. Vue2 和 Vue3 中的 v-model 的区别#记录

    2024-04-03 07:36:05       14 阅读
  10. php使用swoole实现TCP服务

    2024-04-03 07:36:05       15 阅读