通过宝塔面板如何把vue项目部署服务器上

一,vue项目打包

首先我们把准备好的vue项目进行打包:输入命令:npm run build 生成dist文件

image.png

二、进入宝塔管理界面,点击网站,然后点击添加站点

image.png

三。按下面输入

image.png

点设置

image.png

四。 输入好点添加,注意!!!test.com 可以,有些已经有的不可以(如dada.com),且前面不能加www

image.png

(1)这里需要删除一开始创建的114.56.55.198

image.png

(2)添加成功后点伪静类

image.png

五。 按下面输入,点击保存, 提示!!! 下面不输入可能导致404 not Found
location / {
  if (!-e $request_filename) {
    rewrite  ^(.*)$ /index.html?s=/$1  last;
    break;
  }
}

image.png

六。 找到指定文件(文件地址和文件名在第三步设置的)

image.png

七。上传刚才打包好的dist文件

点击上传,上传目录,选择dist文件,点击开始上传

image.png

上传好如下图

image.png

image.png

八,点网站,点击设置,选择网站目录,检查网站目录和运行目录是否和刚才上传dist文件目录一致,不一致需要修改

image.png

image.png

网址输入 test.com 结果访问成功

image.png

  • 8
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值