将Vue应用部署到服务器的正确方法很多时候我们发现硬写的VueJs应用在本地搭建的服务器上打包测试后没有问题，但实际上放在服务器上上传后，或多或少会发现一些问题，比如：页面出现空白，获取资源的路径不对等。相信使用VueJs作为前端开发技术栈的小伙伴，或多或少都会遇到这样的问题。我也遇到过，所以现在我们就这样的问题一一解决。基于Vue-Cli如何打包，通过npmrunbuild进行打包操作如何部署打包好的资源，基于Vue-Cli，dist目录下通常有static目录和index.html文件，这两个文件可以直接丢给服务器但是有时候，我们会直接把dist文件丢给服务器。服务器打包后，资源引用路径会出现问题。服务器打包后，会出现一个空白页面。css的类型被截取并转换为“text/plain”。打包到服务器后，出现路由刷新404的问题。资源引用路径的解决方案。一般这个问题是在webpack中配置打包发布目录导致的。情况1、如果static和index.html直接放在服务器的根目录下，也就是说当前应用访问的URL是：http://www.xxx.com解决方法：配置输出publiPath：“/”或“./”情况2.直接将打包后的dist文件放在服务器的根目录下，即如果需要访问当前应用，访问网址如：http://www.xxx.com/dist解决方案：首先需要在创建路由实例时添加：constrouter=newVueRouter({mode:'history',base:'/mobile/',scorllBehavior:()=>({y:0}),路线});Then然后打包发布目录：publiPath:"/dist/"or"http://www.xxx.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”。这时候看了两遍相关的配置文件，后来发现，真的把狗给处理了，哭了一阵子。让我先看看上面的图片。原来服务器返回的类型是“text/plain”。这个问题很好解决，直接把这张图给后台，你不觉得被骗了吗/(ㄒoㄒ)/~~。
