从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要介绍了如何将Vue项目部署到服务器,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、网页空间、营销软件、网站建设、进贤网站维护、网站推广。
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入到生产环境,编译打包后,放入服务器,项目就不正常了,会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张,正确的配置加上后端的简单配合就可以解决。
如何打包
基于Vue-Cli,通过npm run build来进行打包的操作
如何部署
将打包出来的资源,基于Vue-Cli的一般是dist目录下有static目录和index.html文件,可以直接将这两个文件扔到服务端
但有时候,我们会直接将dist文件扔到服务端
出现的问题
打包到服务器后,出现资源引用路径的问题
打包到服务器后,出现空白页的问题
打包到服务器后,出现引入的css的type被拦截转换为"text/plain"问题
打包到服务器后,出现路由刷新404的问题
下面笔者根据自己Vue项目从编译打包到正常部署服务器的经验,来告诉大家如何解决这些问题。
一、前端配置:
①、router配置--指定路由起始(在开发模式中,Vue项目被放在了webpack配合nodeJs生成的本地服务器的根目录,但是在真实服务器中,项目肯定不会放在根目录,所以要指定router的base)
router
提前和后端商量好项目部署的服务器文件夹路径
②、编译打包配置
进入config --> index.js
build
③、使用npm run build进行打包,至此前端能做的配置已经做完
二、后端配置:
路由跳转出现404,主要原因是后端对这个虚拟的前端路由没有做任何处理,服务器在找不到指定路径下的资源时,只能向客户端返回404。
解决办法(Apache):进行url重写 --- 将Vue项目所在服务器文件夹下的路径,例如:
leibo.group/pcMall/.... 重写为 leibo.group/pcMall/index.html
.hatccess
具体的Apache开启allowoverride ,url重写,后端分分钟就解决了
感谢你能够认真阅读完这篇文章,希望小编分享的“如何将Vue项目部署到服务器”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图