位置: IT常识 - 正文

VUE项目部署(vue项目部署后白屏)

编辑:rootadmin
VUE项目部署 前端项目的部署1.1 开发完的vue的项目 首先运行 以下命令 对项目进行打包npm run build

推荐整理分享VUE项目部署(vue项目部署后白屏),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue项目部署在tomcat上,vue项目部署到服务器,vue项目部署后白屏,vue项目部署到linux服务器,vue项目部署到服务器上,页面空白,springboot vue项目部署,vue项目部署到服务器,vue项目部署到服务器上,页面空白,内容如对您有帮助,希望把文章链接给更多的朋友!

1.2 安装nginx服务器

​ nginx是一款轻量级的Web服务器、反向代理服务器,由于它的内存占用少,启动极快,高并发能力强,在互联网项目中广泛应用,我们的网站部署到Nginx服务器上。当然也可以选择其它web服务器,这里我们就使用主流的nginx。

​ 首先查看部署项目的服务器上是否有Nginx

whereis nginx

​ 如果出现如下界面,则代表未安装nginx,否则可跳过本节。

​ 安装nginx

​ 运行命令

yum install -y nginx

​ 如果安装的比较慢 可以考虑一下是不是 yum源的原因 可以换成阿里等国内的yum源

运行完安装命令之后 可以通过

nginx -v

命令查看nginx是否安装成功 如果显示上图的版本 则表示安装成功

1.3 启动nginx

运行命令

nginx

在浏览器输入部署服务器的ip 如果出现一下的内容

则表示nginx启动成功

这里访问默认的是80端口,因为nginx服务就是默认的80端口,如果不能访问,大致有几种原因:

nginx未启动服务器安全组未加入80端口nginx配置错误

nginx的停止命令

nginx -s stop

停止nginx之后 页面无法访问

VUE项目部署(vue项目部署后白屏)

重启nginx服务,一般用于修改配置文件之后,命令如下

nginx -s reload1.4 修改nginx配置

查看nginx的安装目录

whereis nginx

此时/etc/nginx则是nginx配置文件存放位置,进入该文件夹

nginx.conf则是默认配置文件,编辑该文件

vim nginx.conf

修改这两个配置 即可 其它的不做修改

1.5 上传dist文件到服务器

将前端项目打包撑得dist文件加 上传到服务器nginx刚刚配置的/home/huailai/的文件夹下

可以使用

scp -r dist/ 用户名@ip:/home/huailai

远程传输的方式上传 也可以通过xftp等工具进行上传

上传完之后 重新启动一下nginx服务即可访问

nginx -s redload

至此 前端项目部署完成

1.6 解决刷新路由404问题

当我们切换路由后,然后在刷新页面,会出现404的情况

这是因为我们vue项目采用了history的路由方式,至于原因主要是vue是单页面应用,细节部分大家可自行下来了解。

解决问题的办法:

(1)将路由模式改为hash

(2)修改nginx配置

location / { try_files $uri $uri/ /index.html; ---解决页面刷新404问题} 

修改之后重启nginx,这个时候刷新浏览器则不会出现404了

由模式改为hash

(2)修改nginx配置

location / { try_files $uri $uri/ /index.html; ---解决页面刷新404问题} 

修改之后重启nginx,这个时候刷新浏览器则不会出现404了

本文链接地址:https://www.jiuchutong.com/zhishi/298483.html 转载请保留说明!

上一篇:Vue结合高德地图实现HTML写自定义信息弹窗(vue接入高德地图)

下一篇:Vue实现角色权限动态路由详细教程,在vue-admin-template基础上修改,附免费完整项目代码(vue角色管理)

  • iqoo8pro附赠充电器吗(iqoo8pro充电器)

    iqoo8pro附赠充电器吗(iqoo8pro充电器)

  • 微信名是否可以设置成空白(微信名可以加微信吗)

    微信名是否可以设置成空白(微信名可以加微信吗)

  • 苹果手机a1660是全网通吗(苹果手机A1660是什么意思)

    苹果手机a1660是全网通吗(苹果手机A1660是什么意思)

  • 微信定时发红包设置(微信定时发红包给指定好友)

    微信定时发红包设置(微信定时发红包给指定好友)

  • 抖音看自己的界面不同(抖音看自己的界面怎么看)

    抖音看自己的界面不同(抖音看自己的界面怎么看)

  • qq长期不绑定手机号会怎样(qq号不绑定手机号会被系统收回吗)

    qq长期不绑定手机号会怎样(qq号不绑定手机号会被系统收回吗)

  • 高危漏洞有必要修复吗(一个高危漏洞多少钱)

    高危漏洞有必要修复吗(一个高危漏洞多少钱)

  • 苹果7什么处理器(苹果换机)

    苹果7什么处理器(苹果换机)

  • 电脑钉钉群直播互动功能该怎么使用(电脑钉钉群直播怎么进入)

    电脑钉钉群直播互动功能该怎么使用(电脑钉钉群直播怎么进入)

  • seatools长检测伤硬盘吗(seatools怎么检测)

    seatools长检测伤硬盘吗(seatools怎么检测)

  • sim卡已关闭什么意思(sim卡已关闭了打不开怎么办)

    sim卡已关闭什么意思(sim卡已关闭了打不开怎么办)

  • 微信朋友圈怎么看前几年的朋友圈(微信朋友圈怎么转发)

    微信朋友圈怎么看前几年的朋友圈(微信朋友圈怎么转发)

  • 抖音时间锁有什么作用(抖音时间锁什么时候刷新)

    抖音时间锁有什么作用(抖音时间锁什么时候刷新)

  • vivox27nfc功能在哪里打开(vivox27nfc功能是什么意思)

    vivox27nfc功能在哪里打开(vivox27nfc功能是什么意思)

  • qq怎么设置开机自启(QQ怎么设置开机自启动)

    qq怎么设置开机自启(QQ怎么设置开机自启动)

  • 苹果18w快充多久可以充满(苹果18w快充多久可以充满苹果8)

    苹果18w快充多久可以充满(苹果18w快充多久可以充满苹果8)

  • 拼多多怎么取消自动付款(拼多多怎么取消0元下单)

    拼多多怎么取消自动付款(拼多多怎么取消0元下单)

  • 拼多多如何加入购物车一起购买(拼多多如何加入购物车)

    拼多多如何加入购物车一起购买(拼多多如何加入购物车)

  • volte高清通话是什么意思(volte高清通话有啥用)

    volte高清通话是什么意思(volte高清通话有啥用)

  • linux more命令详解(linux中的more)

    linux more命令详解(linux中的more)

  • 陌陌怎么不可以视频了(陌陌怎么不可以评论别人)

    陌陌怎么不可以视频了(陌陌怎么不可以评论别人)

  • 苹果手机垃圾清理在哪里(苹果手机怎么清理垃圾)

    苹果手机垃圾清理在哪里(苹果手机怎么清理垃圾)

  • 小米风扇怎么连米家(小米风扇怎么连接wifi那里闪灯)

    小米风扇怎么连米家(小米风扇怎么连接wifi那里闪灯)

  • 微信上的文件怎么打印出来(微信上的文件怎么传到钉钉上去)

    微信上的文件怎么打印出来(微信上的文件怎么传到钉钉上去)

  • 最全面的SpringBoot教程(三)——SpringBoot Web开发(最全面的心脏检查怎么做)

    最全面的SpringBoot教程(三)——SpringBoot Web开发(最全面的心脏检查怎么做)

  • 运输合同印花税税率
  • 增值税发票抵扣是什么意思
  • 所得税汇算清缴分录怎么做
  • 包装版费怎么计入生产成本
  • 个税专项扣除如何申报
  • 固定资产累计折旧是什么科目
  • 工程服务增值税税率1%
  • 没有车加油费可以入账吗
  • 小规模增值税税率表
  • 纳税申报表销售额可以是负数吗
  • 未开票收入已报税怎么办
  • 电子发票不小心删掉了怎么办
  • 发生工伤事故借条怎么写
  • 应付票据与应付账款
  • 对于税收会计记账科目应该如何设置?
  • 一般纳税人可以简易计税的有哪些
  • 扩大税收来源什么意思
  • 关于有什么新的政策
  • 固定资产折旧方法可以变更吗
  • 企业法人信息变更
  • 外币报表折算差额为负数代表
  • 银行基本户年费
  • 企业微信收款怎么提现
  • 中小企业信用服务平台
  • 工会上缴40%的经费法律依据
  • 怎么授权gg修改器root权限
  • 公司购买购物卡发给职工的账务处理
  • 咨询服务费怎么交税
  • 京东最贵的商品排行
  • 代理记账费用计入什么会计科目
  • 详解php字符串替换
  • 如何开增值税专用发票步骤图解
  • php数组分为哪两种
  • html制作动画代码
  • 逆算法怎么算
  • 基于thinkphp开发的框架
  • php curl 封装
  • 库存商品暂估入库金额如何确定
  • 出口信用保险补贴是否不征税收入
  • 印花税应计入哪里
  • 补偿金是否应该上税
  • java中public修饰什么
  • phpcms怎么修改模板风格
  • 收取水电费计入什么科目
  • 费用报销审批单和费用报销单区别
  • db2数据库管理的工具
  • 营改增后简易计税是多少税率
  • 已经认证抵扣的发票会计分录
  • 非同一控制下控股合并入账价值
  • 当月的进项税可以不认证吗?
  • 商业购进商品运费怎么算
  • 购进商品发生溢余
  • 公司聚餐做什么科目
  • 小规模纳税人没有进项发票违法吗
  • 上月留抵税怎么算应纳税额
  • 公账发工资如何记账
  • 员工出差的费用怎么算
  • 银行开户许可证怎么查询
  • 公司股东借款转私人账户
  • 如何把凭证装订机弄坏
  • windows server 2003 sp2密钥
  • 一个绝招 组合的成语
  • ubuntu18.04lts
  • fedora7
  • Solaris 10.0 cvs的安装方法
  • spybotsd.exe - spybotsd 是什么文件进程
  • win7系统自带刻录启用
  • win8windows设置在哪里
  • border:none与border:0使用区别
  • js获取浏览器当前访问的ip
  • dedecms建站操作
  • shell脚本总结
  • 如何用python连接数据库
  • 安卓实时屏幕
  • grade 编译
  • JavaScript基础教程
  • js水平垂直居中怎么设置
  • 化妆品的消费税率为
  • 税务文书有哪些
  • 2020年青海国税工资待遇
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设