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

  • 无票收入怎么做账,要交税吗,填入增值税申报表
  • 公司注销还能要回钱吗
  • 计提年终奖可以冲减利润
  • 增值税是5%的是什么
  • 不动产租赁属于经营租赁吗
  • 污水处理企业如何捕捉碳中和减少了的碳足迹
  • 即征即退免所得税吗
  • 公司委托收款该怎么办
  • 公司的钱转到个人账户用途写什么
  • 车的违章处理
  • 费用怎样确认是可抵扣暂时性差异?
  • 非营利性代收代付费用会计处理怎么做?
  • 服务业工资计入成本还是营业费用
  • 开了负数发票印花税减掉吗?
  • 劳务报酬2019
  • 城市建设维护税和教育费附加怎么算
  • 关于工商年检社保的通知
  • 零售通收银
  • 团队建设费用怎么入账
  • 微信收款需要纳税多少
  • 如何申请残疾人
  • 无法收回的款项摘要怎么写
  • 净利润分配股利的会计分录
  • 怎么限制路由器使用人数
  • 关闭通知横幅
  • 社保增加人员网上申报
  • 累积带薪缺勤金额怎么算
  • laravel跨库查询
  • 处置子公司属于调整事项吗
  • rtfd文件
  • dvdram是什么意思
  • 以商业汇票抵付应付账款会计分录
  • php header Content-Type类型小结
  • web前端综合案例开发离线作业1
  • vue二级菜单的隐藏与显示
  • grid 框架
  • php 提交表单
  • 预提费用计提的分录
  • javascript最好的教程
  • linuxroot切换
  • 车船税怎么计算
  • 接受捐赠收入如何纳税
  • 已经红冲的发票显示正常
  • 个人对公付款
  • 试生产期间发生事故后重新
  • 出差自己开车去开会怎么报销交通费
  • mysql1290报错
  • mysql分页优化原理
  • 无票收入要交企业所得税吗
  • 中级会计考试时间
  • 进项税额是怎么算的
  • 股权转让对价款如何计算
  • 自建生产线的入账价值
  • 给客户的回扣怎么表达
  • 代收会计分录
  • 哪些账户期末结账后一定无余额
  • 预付卡发票能不能走福利账户
  • 计提社保如何做分录
  • mysql官方监控工具
  • js操作剪切板
  • xp系统安装程序没反应
  • window10怎么启用net 3.5
  • win8安全模式黑屏
  • win8如何删除登录密码
  • Ubuntu After Install 2.6 帮助你安装 Ubuntu 常用软件
  • win10升级补丁位置
  • Win7系统电脑开不开机怎么办
  • win7自带解压缩
  • python下载百度云文件
  • linux中的shell命令
  • ftp下载工具能自动登录ftp服务器
  • unity ulua
  • 微信内置浏览器怎么清除缓存
  • unity协程的工作原理
  • Android 自定义view炫酷动画
  • javascript基础
  • javascript编程语言
  • android解压app
  • js面向接口编程
  • 公积金上个月没交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设