很多时候我们发现辛辛苦苦写的VueJs应用在我们本地服务器上打包测试没有任何问题，但是真正放到服务器上之后，我们会发现或多或少有几个问题，比如：页面空白，资源路径不对等。相信使用VueJs作为前端开发技术栈的小伙伴，或多或少都会遇到这样的问题。我也遇到过这样的问题。现在让我们一一解决这些问题。基于Vue-Cli如何打包，通过npmrunbuild进行打包操作如何部署打包好的资源，基于Vue-Cli，dist目录下通常有static目录和index.html文件，这两个文件可以直接丢给服务器但是有时候，我们会直接把dist文件丢给服务器。服务器打包后，资源引用路径会出现问题。服务器打包后，会出现一个空白页面。css的类型被截取并转换为“text/plain”。打包到服务器后，出现路由刷新404的问题。资源引用路径的解决方案。一般这个问题是在webpack中配置打包发布目录导致的。情况1、如果static和index.html直接放在服务器的根目录下，也就是说当前应用访问的URL是：http://www.abc.com解决方法：配置输出publiPath："/"或"./"情况2.直接将打包后的dist文件放在服务器的根目录下，即如果需要访问当前应用，访问网址如：http://www.abc.com/dist解决方案：首先需要添加：construuter=newVueRouter({mode:'history',base:'/mobile/',scorllBehavior:()=>({y:0}),routes});然后packagePublishdirectory:publiPath:"/dist/"or"http://www.abc.com/dist/"由于路由历史模式下刷新当前路由404的问题出现。当前路由刷新时，会出现404。其实这是因为当前页面刷新时，在服务器上找不到要访问的资源。也就是说我们在VueJs开发应用的过程中设置的路径不是真实的路径，使用的是history模式。解决方案需要后端的配合。参考https://router.vuejs.org/en/essentials/history-mode.html。导入的css类型被拦截并转换为“text/plain”。这是我的开发过程。我们都知道遇到的奇怪问题一般都是基于Vue-Cli的，通过WebPack打包的资源不需要改动。但是我发现，我上传代码后，输入网址，看到的页面吓到我了。我发现所有的样式都不存在。我的第一反应是以为打包配置过程出了问题，然后通过fillder调试，发现css文件是正确获取的。可以看到这个css文件的类型被截取了，转换为“text/plain”。这时候看了两遍相关的配置文件，后来发现真的不好用，哭了一阵子。上图第一张：擦了擦，原来服务器返回的type居然是“text/plain”。这个问题很好解决，直接把这张图给后台，你不觉得被骗了吗/(ㄒoㄒ)/~~。
