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

  • 解密营销中的关键人物法则(营销的十六个关键词)

    解密营销中的关键人物法则(营销的十六个关键词)

  • 微博可以改名字吗(微博可以改名字不)

    微博可以改名字吗(微博可以改名字不)

  • Windows7结束任务栏快捷键(windows结束任务的组合键)

    Windows7结束任务栏快捷键(windows结束任务的组合键)

  • x30和s6的区别(x30pro和s6哪个好)

    x30和s6的区别(x30pro和s6哪个好)

  • 抖音封永久怎么提现(抖音封永久怎么解绑手机号码)

    抖音封永久怎么提现(抖音封永久怎么解绑手机号码)

  • usim卡应用是干什么的(usim卡应用app怎么卸载不了)

    usim卡应用是干什么的(usim卡应用app怎么卸载不了)

  • iphone怎么设置打电话说关机(iphone怎么设置打开app需要密码)

    iphone怎么设置打电话说关机(iphone怎么设置打开app需要密码)

  • wifi已连接但无法上网(wifi已连接但无法上网需登录认证)

    wifi已连接但无法上网(wifi已连接但无法上网需登录认证)

  • 4.7寸手机有哪几款(4.7寸手机有哪几款r,苹果5.0,苹果手机5.0的)

    4.7寸手机有哪几款(4.7寸手机有哪几款r,苹果5.0,苹果手机5.0的)

  • ps压感设置在哪里(ps压感在哪开)

    ps压感设置在哪里(ps压感在哪开)

  • 信息显示已送达对方是收到了吗(苹果手机号被拉黑了发信息显示已送达)

    信息显示已送达对方是收到了吗(苹果手机号被拉黑了发信息显示已送达)

  • 手机自动变暗怎么关闭(手机怎么自己变暗了)

    手机自动变暗怎么关闭(手机怎么自己变暗了)

  • oppo手机隐藏的照片怎么找出来(oppo手机隐藏的照片在哪里)

    oppo手机隐藏的照片怎么找出来(oppo手机隐藏的照片在哪里)

  • cydia是什么软件(cydia是啥)

    cydia是什么软件(cydia是啥)

  • 三星红卡和橙卡的区别(三星红卡还是黄卡)

    三星红卡和橙卡的区别(三星红卡还是黄卡)

  • ipad wifi密码正确但是提示密码错误(ipadwifi密码正确但是提示密码错误,手机却能连上)

    ipad wifi密码正确但是提示密码错误(ipadwifi密码正确但是提示密码错误,手机却能连上)

  • 如何下载快手视频到手机(如何下载快手视频不带快手号)

    如何下载快手视频到手机(如何下载快手视频不带快手号)

  • vivox20手机sos紧急设置(vivo手机的sos紧急求救是怎么回事)

    vivox20手机sos紧急设置(vivo手机的sos紧急求救是怎么回事)

  • 手机相机实况在哪里(手机相机实况在哪里找)

    手机相机实况在哪里(手机相机实况在哪里找)

  • iphone xr可以无线充电吗(苹果xr能不能无线)

    iphone xr可以无线充电吗(苹果xr能不能无线)

  • 显示器hz代表什么意思(显示器的hz)

    显示器hz代表什么意思(显示器的hz)

  • 荣耀20指纹解锁在哪(荣耀20指纹解锁失灵)

    荣耀20指纹解锁在哪(荣耀20指纹解锁失灵)

  • 幻灯片的切换方式是指(幻灯片的切换方式在哪)

    幻灯片的切换方式是指(幻灯片的切换方式在哪)

  • 小度在家远程监控对方知道吗(小度在家远程监控有声音吗)

    小度在家远程监控对方知道吗(小度在家远程监控有声音吗)

  • 京东实名认证在哪里看(京东上实名认证)

    京东实名认证在哪里看(京东上实名认证)

  • java基础-泛型与正则表达式(java泛型的定义和使用)

    java基础-泛型与正则表达式(java泛型的定义和使用)

  • 暂缓收缴工会经费的请示
  • 不动产租赁属于经营租赁吗
  • 购房契税应该交给谁
  • 建设单位对施工单位的管理要求
  • 房屋租赁费属于什么会计分录
  • 特殊销售方式下销售额的确定
  • 新会计准则要求
  • 销售已使用的固定资产增值税
  • 代账报税软件哪个好
  • 汇算清缴时资产总额如何计算
  • 待转销项税额如何列报
  • 专票开错了可以作废吗
  • 公司租车费用会计分录
  • 改建或新建建筑物含义
  • 土地闲置费是否可以列入生产成本
  • 正常消耗的直接材料计入当期损益
  • 一般纳税人企业所得税税率多少
  • 增值税的附加税有哪些,税费多少
  • 银行汇票超期退回怎么办
  • 持有至到期投资科目被取消了吗
  • 药品入库和出库必须执行什么制度
  • 职工福利费计提标准是多少
  • 启用或关闭windows功能怎么勾选
  • 采用赊销方式销售货物的纳税义务发生时间
  • 王者荣耀中白起的台词
  • 模具费用如何平摊到产品上
  • 遗失发票如何处理好
  • 重装系统D盘文件还能恢复吗
  • Win10 20H2 LSASS.exe自动重启故障已得到修复
  • PHP:spl_autoload_extensions()的用法_spl函数
  • 从午夜穹顶看育空河,加拿大育空道森市 (© Robert Postma/Getty Images)
  • 阿尔比恩洞的级别
  • 进项已认证后冲红又重开
  • 境外服务费代扣代缴所得税计算
  • 减免增值税附加税也一起减免吗
  • css鼠标移入移出切换事件
  • 命令grep
  • 微信红包的随机性
  • php23种设计模式
  • php的foreach遍历原理
  • 个税系统为什么没有累计数据
  • 确认收入与结转成本会计分录怎么写
  • 帝国cms生成app
  • 织梦怎么新建页面
  • mysql存储过程用什么调用
  • 应税销售行为有哪些
  • 临时用工费用计入什么会计科目
  • 税务上减免两费是什么
  • 发放股票股利的意义包括
  • 购买员工团体意外险需要缴纳个税么
  • 收到其他企业投资是属于其他业务收入吗
  • 收入支出结余怎么记账
  • 电子发票开票方怎么做账?
  • 购买商品或服务不给开发票违法吗
  • 账簿按形式分几种
  • 如何在境外银行开户
  • mac下mysql密码忘记了怎么办
  • winpe安装
  • 2016年最火的歌曲排行前100首
  • ubuntu20.04关闭图形界面命令
  • RAVMOND.exe - RAVMOND是什么进程.有什么作用
  • 苹果笔记本mac系列区别
  • win7共享文件设置
  • cocos2dx开发的游戏
  • socket pf_inet
  • jQuery插件能输出到控制台
  • 仿京东首页html5
  • nodejs 回调
  • python二级怎么出题
  • android 启动器 设置
  • linux 服务器重启
  • javascript判断题
  • python怎么编函数
  • python基于django的项目
  • 国家税务总局青海省税务局
  • 上海税务ca证书更新
  • 税控盘如何分配发票
  • 厦门增值税发票查验
  • 小微企业所得税优惠政策最新2023
  • 生产企业出口退税账务处理会计分录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设