首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >宝塔面板部署vue项目

宝塔面板部署vue项目

作者头像
Ant丶
发布2022-04-11 14:24:11
8.5K0
发布2022-04-11 14:24:11
举报
文章被收录于专栏:cayzlhcayzlh

宝塔面板部署vue项目

折腾了许久的前端项目终于要上线了 … ^_^

最近有个项目是使用vue开发的前端工程,在历经一个月的开发之后,终于需要上线了。记录一下用宝塔面板部署vue项目上线的过程。

部署方式

将vue项目进行打包

运行以下命令:

npm run build

或者在webstorm的package.json运行build

image-20220403093649980
image-20220403093649980

运行之后生成dist文件夹

image-20220403093740307
image-20220403093740307

生成的dist文件夹则是本项目最终的产物,可以将它部署到常见的web服务器中,如:

  • Ngxin
  • Apache
  • tomcat
  • IIS
  • Node.js
  • ··· ···

宝塔面板部署网站

  • 登录宝塔面板,新建网站
image-20220403094158499
image-20220403094158499

输入域名,创建FTP,因为没有用到PHP,选择纯静态即可。

image-20220403094248792
image-20220403094248792
  • 创建完成之后去FTP上传dist文件夹的内容到相应的路径
image-20220403094524681
image-20220403094524681
image-20220403094548908
image-20220403094548908
  • 验证网站 在上传完网站文件之后,输入设定的域名就可以访问网站了。

踩坑记录

vue项目部署后刷新页面出现404错误

原因是由于vue项目使用history模式,只需要将之改成hash重新打包上传即可。

另一个解决方法是在服务端解决:

在宝塔面板网站菜单,找到部署的vue站点,打开设置,在配置文件设置中添加以下代码:

location / {
  try_files $uri $uri/ @router;
  index index.html;
}

location @router {
  rewrite ^.*$ /index.html last;
}

添加到如下位置:

image-20220403095148831
image-20220403095148831

本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议,转载请注明出处。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-04-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 宝塔面板部署vue项目
    • 部署方式
      • 宝塔面板部署网站
        • 踩坑记录
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档