Vue 项目部署到服务器的问题解决方法

时间:2021-05-26

相信很多小伙伴在用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重写,后端分分钟就解决了

    如果是其他类型服务器

    请自行参考https://router.vuejs.org/zh-cn/essentials/history-mode.html

    总结:在单页面部署服务器中,其实更多的是思想的改变,利用前端路由来控制用户界面内容的变更,以上就是笔者在项目部署服务器中的一些经验,如果有什么阐述的不当的地方,还望指出!

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章