宝塔面板作为一款广受欢迎的服务器管理面板,受到了广大开发者的青睐。而Vue.js作为一个简洁、高效、可复用的前端框架,在Web开发中也处于领先地位。将两者结合起来,可以实现快速部署并高效地管理Vue项目。
在开始部署之前,需要确保在服务器上已经安装了宝塔面板,并创建好了对应的网站和数据库。
首先,在本地机器上使用命令行进入到Vue项目的根目录,输入如下命令:
npm run build
该命令将启动Vue项目的打包过程,并在项目的“dist”文件夹中生成打包好的文件。
接下来,将该文件夹中的所有文件打包为一个zip压缩文件,命名为“vue-dist.zip”。
将该zip文件上传至服务器的“/www”目录下,并解压缩,得到一个名为“dist”的文件夹。
在宝塔面板中,进入对应网站的“网站设置”页面,进入“SSL证书”选项卡,启用“强制HTTPS访问”选项。
接着,进入“网站目录”选项卡,点击“添加目录”,将“dist”文件夹添加进来,设置“目录访问”为“禁止”,防止直接访问该文件夹。
进入“反向代理”选项卡,点击“添加反向代理”,填写如下信息:
目标URL:http://127.0.0.1:该网站监听的端口号
目录:/
保存设置后,重新启动网站,在浏览器中输入网站的域名,即可访问到部署好的Vue项目。
注意:如果在部署过程中遇到问题,需要检查服务器上是否安装了Node.js、npm等必要的软件,并确保打包好的文件已经上传至服务器。