位置: 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角色管理)

  • 真我gtneo2t内存多大(真我gtneo2t内存扩展需要关闭吗)

    真我gtneo2t内存多大(真我gtneo2t内存扩展需要关闭吗)

  • 华为手机怎么打出凹凸文字(华为手机怎么打开空调遥控器)

    华为手机怎么打出凹凸文字(华为手机怎么打开空调遥控器)

  • 幻灯片放映快捷键(幻灯片放映快捷键是按f几)

    幻灯片放映快捷键(幻灯片放映快捷键是按f几)

  • 小米8微信视频有美颜吗(小米8微信视频聊天怎么设置美颜功能)

    小米8微信视频有美颜吗(小米8微信视频聊天怎么设置美颜功能)

  • 荣耀30pro屏幕尺寸大小(荣耀30pro手机屏幕尺寸)

    荣耀30pro屏幕尺寸大小(荣耀30pro手机屏幕尺寸)

  • 怎么缩小表格的行间距(怎么缩小表格的高度)

    怎么缩小表格的行间距(怎么缩小表格的高度)

  • 天猫预售付尾款优惠券用不了(天猫预售付尾款可以合并付款吗)

    天猫预售付尾款优惠券用不了(天猫预售付尾款可以合并付款吗)

  • 英特尔uhd620相当于什么显卡(英特尔uhd graphics620相当于)

    英特尔uhd620相当于什么显卡(英特尔uhd graphics620相当于)

  • 苹果笔记本电脑删除键是哪一个(苹果笔记本电脑怎么恢复出厂设置)

    苹果笔记本电脑删除键是哪一个(苹果笔记本电脑怎么恢复出厂设置)

  • 小米手机微信发不出去信息是怎么回事(小米手机微信发不出去图片怎么回事)

    小米手机微信发不出去信息是怎么回事(小米手机微信发不出去图片怎么回事)

  • 小米10与华为p30pro对比(小米10与华为p30pro哪个好)

    小米10与华为p30pro对比(小米10与华为p30pro哪个好)

  • 腾讯动漫会员有什么用(腾讯动漫会员有必要开吗)

    腾讯动漫会员有什么用(腾讯动漫会员有必要开吗)

  • 联发科p90相当于麒麟什么处理器(联发科p90相当于麒麟多少)

    联发科p90相当于麒麟什么处理器(联发科p90相当于麒麟多少)

  • qq多少太阳一个皇冠(qq一个太阳多少天)

    qq多少太阳一个皇冠(qq一个太阳多少天)

  • qq暂时解冻多久能恢复(qq暂时冻结解封)

    qq暂时解冻多久能恢复(qq暂时冻结解封)

  • 爱奇艺会员怎么赠送(爱奇艺会员怎么取消自动续费)

    爱奇艺会员怎么赠送(爱奇艺会员怎么取消自动续费)

  • 手机wps怎么发文件夹(手机wps怎么发文件给微信好友)

    手机wps怎么发文件夹(手机wps怎么发文件给微信好友)

  • 新版vue怎么设置时间(vue怎么设置中文版本)

    新版vue怎么设置时间(vue怎么设置中文版本)

  • nova5超广角在哪里(华为nova5i超广角在哪里)

    nova5超广角在哪里(华为nova5i超广角在哪里)

  • 微信怎么设置不显示微信号(微信怎么设置不看对方的朋友圈)

    微信怎么设置不显示微信号(微信怎么设置不看对方的朋友圈)

  • 爱奇艺怎么解绑手机号(爱奇艺怎么解绑qq号)

    爱奇艺怎么解绑手机号(爱奇艺怎么解绑qq号)

  • 微信服务器定期删除吗(微信服务端有没有存消息)

    微信服务器定期删除吗(微信服务端有没有存消息)

  • Win11电脑下载的文件被自动删除怎么办(win11电脑下载的软件桌面没有图标怎么办)

    Win11电脑下载的文件被自动删除怎么办(win11电脑下载的软件桌面没有图标怎么办)

  • b250主板哪个好?四款B250主板推荐(b250主板最好的cpu是哪一款)

    b250主板哪个好?四款B250主板推荐(b250主板最好的cpu是哪一款)

  • 本期实际抵减税额合计0.00不等于
  • 申报纳税的意思
  • 其他项目工会筹备金怎么报税
  • 房地产企业年报台账怎么填
  • 税收抵免与税收的区别
  • 河道工程修建维护管理费何时开始停征?
  • 项目所在地怎么填
  • 免费的产品
  • 企业名称变更后原名称还能使用吗
  • 增值税晚交一个月会怎么样
  • 未结清全额是逾期吗
  • 出售旧机器设备,发生净收益会计分录
  • 培训费的进项需要转出吗
  • 中药饮片适用增值税税率
  • 损益表和利润表的关系
  • 建筑类企业可以申报高新吗
  • 网络直播应如何缴纳增值税?
  • 机票改签费要开发票吗
  • 跨年暂估成本的账务处理冲回
  • linux下xhost命令报错:unable to open display的解决办法
  • 个人所得税跨年度能退吗
  • u盘中毒症状
  • PHP:oci_set_action()的用法_Oracle函数
  • vue数据处理在哪个阶段
  • 给外部人员发奖状怎么说
  • 开发商延期交房违法吗
  • vue input value
  • php面向对象的三大特征
  • vue中的组件有几类
  • 最常用的基金业务
  • 核销固定资产时会计处理
  • laravel 分页 api
  • 残保金计提比例
  • 检测费可以抵扣增值税吗
  • 固定资产盘盈税务处理政策
  • 什么情况下不用割包皮
  • 首涂第二十一套模板
  • 电子税务局如何增加税种认定
  • 企业的其他应付款
  • 修改数据库为多个数据
  • 企业利润怎么提取出来
  • 财务负责人岗位要求
  • 修理费用的会计怎么做账
  • 进项税抵扣的分录怎么做
  • 小规模企业房产税税率是多少
  • 土地使用税退税怎么做会计分录
  • 零售行业会计分录怎么做
  • 办理房产证的时候可以加孩子的名字吗
  • 加计抵减需要计税吗
  • 借方会计科目表
  • 微信支付属不属于电子商务
  • 开给个人的普通增值税
  • 毛利润利润总额净利润的关系图
  • 没有对公业务的银行
  • 应收账款余额等于什么?
  • 快速释放剪贴蒙版快捷键
  • ubuntu配置yum
  • Ubuntu下VirtualBox的vdi文件克隆方法
  • win10 20h2怎么更新
  • ireike.exe - ireike是什么进程 有什么作用
  • 电脑kernel32.dll
  • win8都有哪些版本
  • win8的显示设置
  • win8 休眠
  • app塔防游戏
  • javascript标题
  • jquery 动态绑定
  • 获取本站的context root
  • 数据库的基本操作语句有哪些
  • Linux CentOS系统下安装node.js与express的方法
  • list嵌套list采用什么结构
  • linux多线程编程实例
  • javascript教程
  • unity方法调用
  • 用python绘制一条直线
  • 企业所得税问题的研究论文
  • 金税盘软件怎么打开
  • 中山大学税务硕士
  • 什么是专案审计
  • 票种核定在电子税务哪里查
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设