相信很多小伙伴在用Vue-cli安装的脚手架开发的时候，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张，正确的配置加上后端的简单配合就可以解决。 [b]如何打包[/b] 基于Vue-Cli,通过npm run build来进行打包的操作 [b]如何部署[/b] [list=1] [*]将打包出来的资源，基于Vue-Cli的一般是dist目录下有static目录和index.html文件，可以直接将这两个文件扔到服务端[/*] [*]但有时候，我们会直接将dist文件扔到服务端 [/*] [/list] [b]出现的问题[/b] [list=1] [*]打包到服务器后，出现资源引用路径的问题[/*] [*]打包到服务器后，出现空白页的问题[/*] [*]打包到服务器后，出现引入的css的type被拦截转换为"text/plain"问题[/*] [*]打包到服务器后，出现路由刷新404的问题[/*] [/list] 下面笔者根据自己Vue项目从编译打包到正常部署服务器的经验，来告诉大家如何解决这些问题。 [b]一、前端配置：[/b] ①、router配置--指定路由起始(在开发模式中，Vue项目被放在了webpack配合nodeJs生成的本地服务器的根目录，但是在真实服务器中，项目肯定不会放在根目录，所以要指定router的base) [img]http://files.jb51.net/file_images/article/201712/201712593118062.png?201711593129[/img] router 提前和后端商量好项目部署的服务器文件夹路径 ②、编译打包配置 进入config --> index.js [img]http://files.jb51.net/file_images/article/201712/201712593148309.png?20171159321[/img] build ③、使用npm run build进行打包，至此前端能做的配置已经做完 [b]二、后端配置：[/b] 路由跳转出现404，主要原因是后端对这个虚拟的前端路由没有做任何处理，服务器在找不到指定路径下的资源时，只能向客户端返回404。 解决办法(Apache)：进行url重写 --- 将Vue项目所在服务器文件夹下的路径，例如： leibo.group/pcMall/.... 重写为 leibo.group/pcMall/index.html [img]http://files.jb51.net/file_images/article/201712/201712593222173.png?201711593233[/img] .hatccess 具体的Apache开启allowoverride ，url重写，后端分分钟就解决了 如果是其他类型服务器 请自行参考[url=https://router.vuejs.org/zh-cn/essentials/history-mode.html]https://router.vuejs.org/zh-cn/essentials/history-mode.html[/url] 总结：在单页面部署服务器中，其实更多的是思想的改变，利用前端路由来控制用户界面内容的变更，以上就是笔者在项目部署服务器中的一些经验，如果有什么阐述的不当的地方，还望指出！ 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。