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

  • 微信上怎么预约车管所业务(微信上怎么预约社保)

    微信上怎么预约车管所业务(微信上怎么预约社保)

  • 滴滴出行实时路况怎么设置(滴滴实时地图)

    滴滴出行实时路况怎么设置(滴滴实时地图)

  • 直播者能看到对方吗(直播者能看到看直播的人吗)

    直播者能看到对方吗(直播者能看到看直播的人吗)

  • 斐讯k2长按reset没用(斐讯k2长按reset后红灯常亮)

    斐讯k2长按reset没用(斐讯k2长按reset后红灯常亮)

  • 关闭拼小圈好友能看到我买的东西吗(关闭拼小圈好友会知道吗)

    关闭拼小圈好友能看到我买的东西吗(关闭拼小圈好友会知道吗)

  • 快手注销账号第一条不通过怎么办(如果快手注销账号后账号会变吗)

    快手注销账号第一条不通过怎么办(如果快手注销账号后账号会变吗)

  • iphonex高度多少厘米(苹果x多少高度)

    iphonex高度多少厘米(苹果x多少高度)

  • 小米10青春版和10pro区别(小米10青春版和10s)

    小米10青春版和10pro区别(小米10青春版和10s)

  • 没有充电盒怎么连接(没有充电盒怎么匹配蓝牙耳机)

    没有充电盒怎么连接(没有充电盒怎么匹配蓝牙耳机)

  • 手机黑屏是咋回事oppo(手机黑屏了怎回事)

    手机黑屏是咋回事oppo(手机黑屏了怎回事)

  • 抖音显示关注太快休息一下怎么回事(抖音怎么刷关注)

    抖音显示关注太快休息一下怎么回事(抖音怎么刷关注)

  • 钉钉直播点赞主播能看到吗(钉钉直播点赞主播看得到吗)

    钉钉直播点赞主播能看到吗(钉钉直播点赞主播看得到吗)

  • 什么是云存储空间(云存储空间是干什么的)

    什么是云存储空间(云存储空间是干什么的)

  • 手机只能接不能打是怎么回事(手机只能接不能打怎么办?)

    手机只能接不能打是怎么回事(手机只能接不能打怎么办?)

  • 手机话费能开qq什么业务(手机话费能开公司发票吗)

    手机话费能开qq什么业务(手机话费能开公司发票吗)

  • 荣耀v30是屏下摄像头吗(荣耀v30是升降摄像头吗)

    荣耀v30是屏下摄像头吗(荣耀v30是升降摄像头吗)

  • iPhone11pro是什么处理器(iphone11pro是什么接口)

    iPhone11pro是什么处理器(iphone11pro是什么接口)

  • 书旗小说自动续费怎么关闭(书旗小说自动续费怎么退款)

    书旗小说自动续费怎么关闭(书旗小说自动续费怎么退款)

  • 苹果耳机a1602什么版本(iphone耳机a1602)

    苹果耳机a1602什么版本(iphone耳机a1602)

  • 分配器怎样调快慢视频(分配器提升慢怎么调)

    分配器怎样调快慢视频(分配器提升慢怎么调)

  • 小米小爱音箱怎么连接蓝牙(小米小爱音箱怎么连接wifi)

    小米小爱音箱怎么连接蓝牙(小米小爱音箱怎么连接wifi)

  • 华为手机如何双开微信(华为手机如何双开应用)

    华为手机如何双开微信(华为手机如何双开应用)

  • ps填充颜色快捷键(照片填充颜色怎么弄)

    ps填充颜色快捷键(照片填充颜色怎么弄)

  • win7电脑时间同步出错解决方法(windows7电脑时间不对)

    win7电脑时间同步出错解决方法(windows7电脑时间不对)

  • 迪纳利国家公园里的白大角羊,阿拉斯加 (© Patrick J. Endres/Getty Images)(迪纳利国家公园在哪个国家)

    迪纳利国家公园里的白大角羊,阿拉斯加 (© Patrick J. Endres/Getty Images)(迪纳利国家公园在哪个国家)

  • 帝国cms如何解决截图出现黑边的问题(帝国cms使用手册)

    帝国cms如何解决截图出现黑边的问题(帝国cms使用手册)

  • 餐饮个体户如何开票
  • 购买金税盘和维税盘区别
  • 企业所得税汇算清缴账务处理
  • 转出未交增值税年末怎么转平
  • 契税减免税特殊规定有哪些?
  • 所得税是什么意思
  • 发票冲红重开,重开时是按新税率还是旧税率
  • 移动平均加权法是什么意思
  • 零售化妆品交什么税种
  • 一般纳税人月底增值税如何结转
  • 社保按基数交工资按时发怎么做账
  • 以前月份暂估成本怎么冲
  • 购买树木计入什么科目
  • 特殊销售业务包括什么
  • 房产税当月计提额怎么算
  • 存货质押贷款风险
  • 长期待摊费用新规定
  • 非货币性资产对外投资
  • 软件维护费入什么科目
  • 出售固定资产支付的相关费用计入
  • 税控盘证书密码一天可以输几次
  • 怎么计算房地产公司可以贷款多少
  • 服务费与劳务费税率的区别
  • 以下凭证免征印花税的有
  • 如何理解税收筹划的概念
  • 如何接收银行承兑
  • 固定资产达到使用状态时发生的安装费用
  • 教育培训行业收入
  • 职工福利费扣除率是多少
  • 应付职工薪酬计提数是借方还是贷方
  • php 抓取别的网站的内容
  • thinkphp5控制器
  • macbookprofacetime
  • 多交的所得税退回来账务处理
  • linux 分享文件
  • 销售退回的账务处理附什么底稿
  • 没签订采购合同怎么办
  • 前端解决浏览器跨域问题
  • 蒙大拿州美景
  • 用支付宝支付的游戏
  • 涂料消费税征税范围
  • 发票明细清单怎么打印
  • 上月附加税计提多了怎么办
  • 处置固定资产账务处理进什么科目
  • mysql用户授权信息保存在哪里
  • 安装sql server 2005,安装不成功怎么设置
  • 航天税盘服务费开的普票可以抵税吗
  • 土地增值税纳税申报期限
  • 债权投资持有期间的账务处理
  • 提取折旧的意义
  • 在非企业合并形成的长期股权投资中
  • 收到现金长时间不付款
  • 应发工资计入什么科目
  • 税前扣除的职工福利费支出怎么算
  • 营改增后进项税额转出
  • 小规模纳税人购买原材料会计分录
  • 筹建期的财务费怎么算
  • 员工体检的发票在哪里开
  • 差旅费属于什么会计要素
  • 生育津贴与员工有关吗
  • 工业企业应通过其他应付款科目核算的有
  • vc6_cn_full.exe
  • windows的使用
  • win7如何创建文件夹
  • ubuntu磁盘清理工具
  • windows远程桌面连接怎么用
  • WinXP巧用Netsh工具快速填写IP参数
  • windows8.1怎么升级
  • win7屏幕不停闪烁
  • django orm left join
  • javascript教程完整版
  • 背景透明度设置
  • bootstrap 多级菜单
  • python向oracle写入
  • node搭建项目
  • 跟踪快件
  • android混淆后怎么破解
  • 东莞网上办税服务厅
  • 注销发票怎么处理流程
  • 湖南电子税务申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设