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

  • 微信删了怎么恢复微信聊天记录(微信删了怎么恢复找回来聊天记录)

    微信删了怎么恢复微信聊天记录(微信删了怎么恢复找回来聊天记录)

  • 喜马拉雅青少年模式在哪(喜马拉雅青少年模式密码忘记了怎么办)

    喜马拉雅青少年模式在哪(喜马拉雅青少年模式密码忘记了怎么办)

  • 小米运动怎么同步到微信运动

    小米运动怎么同步到微信运动

  • 投影仪无信号是怎么回事(投影仪投影无信号)

    投影仪无信号是怎么回事(投影仪投影无信号)

  • qq个性签名怎么设置(qq个性签名怎么设置权限设置)

    qq个性签名怎么设置(qq个性签名怎么设置权限设置)

  • 苹果内存可以扩大吗(苹果内存扩容是什么意思)

    苹果内存可以扩大吗(苹果内存扩容是什么意思)

  • qq登录验证码总是错误(qq登陆验证码)

    qq登录验证码总是错误(qq登陆验证码)

  • 4g测速多少正常(4g实测速度)

    4g测速多少正常(4g实测速度)

  • 淘宝换货商家在规定时间内几天要发货(淘宝换货卖家)

    淘宝换货商家在规定时间内几天要发货(淘宝换货卖家)

  • 怎么发送文档(怎么发送文档到别人邮箱)

    怎么发送文档(怎么发送文档到别人邮箱)

  • 华为mate9pro怎么强制关机(华为mate9pro怎么取卡)

    华为mate9pro怎么强制关机(华为mate9pro怎么取卡)

  • 抖音发重复视频有影响吗(抖音发重复视频会降流量吗)

    抖音发重复视频有影响吗(抖音发重复视频会降流量吗)

  • ios11.2.6更新了什么(苹果更新11.26)

    ios11.2.6更新了什么(苹果更新11.26)

  • ipad怎么清理垃圾文件(ipad怎么清理垃圾软件)

    ipad怎么清理垃圾文件(ipad怎么清理垃圾软件)

  • 电脑主机灰尘太多怎么清理(电脑主机灰尘太多影响设备么)

    电脑主机灰尘太多怎么清理(电脑主机灰尘太多影响设备么)

  • 小米9pro怎么设置一键锁屏(小米9pro怎么设置自动开关机)

    小米9pro怎么设置一键锁屏(小米9pro怎么设置自动开关机)

  • 苹果11支持指纹吗(苹果11支持指纹解锁吗)

    苹果11支持指纹吗(苹果11支持指纹解锁吗)

  • switch设置主副账号(switch主副号如何设置)

    switch设置主副账号(switch主副号如何设置)

  • 抖音怎么禁止别人下载(抖音怎么禁止别人私信我)

    抖音怎么禁止别人下载(抖音怎么禁止别人私信我)

  • qq距离感应器怎么关闭(qq电话取消距离感应)

    qq距离感应器怎么关闭(qq电话取消距离感应)

  • 华为各个系列的特点(华为各个系列的的意思是)

    华为各个系列的特点(华为各个系列的的意思是)

  • nova4e和nova4区别(nova4e和nova4的区别在哪里)

    nova4e和nova4区别(nova4e和nova4的区别在哪里)

  • 微信收款码有效期多久(怎么弄微信收款码)

    微信收款码有效期多久(怎么弄微信收款码)

  • word一二三级标题设置(word一二三级标题字体格式)

    word一二三级标题设置(word一二三级标题字体格式)

  • 抖音怎么升级(抖音怎么升级到最新版本)

    抖音怎么升级(抖音怎么升级到最新版本)

  • 陌陌没有提示音咋回事(陌陌没有消息提示音)

    陌陌没有提示音咋回事(陌陌没有消息提示音)

  • 2023年AI十大展望:GPT-4领衔大模型变革,谷歌拉响警报,训练数据告急(2023年中国会有什么重大事件)

    2023年AI十大展望:GPT-4领衔大模型变革,谷歌拉响警报,训练数据告急(2023年中国会有什么重大事件)

  • 山东省增值税发票查验平台
  • 一般纳税人租赁费税率5%是简易征收吗?
  • 生产型企业怎么退税
  • 低于5000是什么意思
  • 转入公司对公账户怎么办
  • 支付股权转让费会计科目
  • 分期付款方式销售货物什么时候确认收入
  • 其他货币资金是资产类科目吗
  • 营改增医院增值税
  • 应收帐款从工资里扣税吗
  • 法院拍卖土地欠土地使用税
  • 以存货抵偿债务结转的相关存货跌价准备
  • 计提与不计提短贷的区别
  • 如何少交点税
  • 如何确定增值税以旧换新方式下销售货物的销售额
  • 上级工会返还的会计分录
  • 事业单位购买固定资产如何记账
  • 期初存货余额在哪张表里
  • 纸质承兑汇票到期怎么兑现,多久能到帐
  • 货物劳务和应税收入区别
  • 分期收款所得税收入确认多少
  • win7为什么现在不能用了
  • 在win7系统中文件属性有哪些
  • php输出mysql
  • 误解苹果
  • 如何启用系统引擎
  • 怎么添加动态磁贴
  • 应交税费进项税额在借方说明什么
  • 房产税的会计科目怎么做
  • 保洁费入账
  • 调整以前年度管理费用会计分录
  • 购买性支出和转移性支出的本质区别
  • 技术维护费计入
  • php如何调用function
  • yaf框架优缺点
  • 关于laravel应用中的各个目录的作用,说法错误的是
  • python基本功
  • element级联动态加载
  • 如何查询发票领到几月份了
  • 2022-8-30 servlet
  • 发票上多盖了一个发票章
  • 安装配置mysql,检验是否正常安装
  • 已付款收到发票
  • 有限合伙企业属于企业法人还是非法人企业
  • mysql8.0存储过程
  • 公司首次申报个人所得税
  • 企业汇总纳税的原则
  • 企业招待客户收入怎么算
  • 租金收入会计科目
  • 收回已确认并转销的应收账款会导致坏账准备的金额增加
  • 个体工商户法人可以变更吗?
  • 上一年度的费用怎么做会计分录
  • 转账支票的特点有哪些
  • 出口货物发生退运损失由外贸承担还是厂家
  • 企业所有者权益在数量上等于
  • 人力资源公司的进项票有哪些
  • 企业的财务战略
  • vista安装图解
  • squid ssh
  • win7共享在哪
  • 蓝屏 win7
  • win8.1系统升级win10
  • ubuntu系统怎么进入命令行
  • slserve.exe - slserve是什么进程
  • windows time同步系统时间的服务无法启动报错1058解决方法
  • win7系统如何删除隐藏文件
  • WNxp下让所有用户桌面显示系统默认图标的方法
  • win7升级win10系统要多久
  • win7系统不能安装到此磁盘
  • redeonsoftware更新
  • mysql命令备份数据库
  • linux搭载服务器
  • 批处理脚本怎么写
  • js中dom的用法
  • javascript面向对象精要pdf
  • js实现无限循环
  • 生猪屠宰行业
  • 安徽农金如何查询开户行
  • 契税计算器在线计算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设