前端新手 Vue应用部署到服务器的正确方式
作者简介：
陈老师
5年多前端工作经验，
主要分享：vue.js,等前端技术，微信开发
公众号：H5前端开发社区
掘金专栏：https://juejin.im/user/5901d6210ce463006153c6cc
页面出现空白现象，获取资源路径不对等，我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题，我也遇到过，那现在我们就来一一解决这样的问题。
很多时候我们发现辛辛苦苦写的VueJs应用经过打包后在自己本地搭建的服务器上测试没有什么问题，但真正放在服务器上后，会发现或多或少的问题，比如：页面出现空白现象，获取资源路径不对等，我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题，我也遇到过，那现在我们就来一一解决这样的问题。
如何打包
-
基于Vue-Cli,通过npm run build来进行打包的操作
如何部署
-
将打包出来的资源，基于Vue-Cli的一般是dist目录下有static目录和index.html文件，可以直接将这两个文件扔到服务端
-
但有时候，我们会直接将dist文件扔到服务端
出现的问题
-
打包到服务器后，出现资源引用路径的问题
-
打包到服务器后，出现空白页的问题
-
打包到服务器后，出现引入的css的type被拦截转换为"text/plain"问题
-
打包到服务器后，出现路由刷新404的问题
出现资源引用路径的解决方案
一般这个问题是由于在webpack配置打包发布的目录造成的。
-
情况一.如果是将static与index.html直接放在服务器根目录,也就是说，当前的应用访问的网址如:http://www.abc.com
-
解决办法：
-
配置输出的publiPath:"/"或者"./"
-
情况二.直接将打包后的dist文件放在了服务器的根目录，也就是如果需要访问当前的应用，访问的网址如:http://www.abc.com/dist
-
解决办法：
-
首先需要在创建路由实例中增加：
-
const router = new VueRouter({
-
-
mode: 'history',
-
-
base: '/mobile/',
-
-
scorllBehavior: () => ({
-
-
y: 0
-
-
}),
-
-
routes
-
-
});
然后再打包发布目录:
-
publiPath:"/dist/"或者"http://www.abc.com/dist/"
出现由于路由的history模式下刷新当前路由出现404的问题
今天做的应用发布到服务器上，发现当刷新当前路由的时候，就会出现404的状况，其实这是
因为当刷新当前页面时候，所需要访问的资源在服务器上找不到，也就是说，我们在VueJs开发应用的过程中，设置路由的路径不是真实存在的路径，并且使用了history模式。
-
解决办法
需要后端进行配合,参考https://router.vuejs.org/en/essentials/history-mode.html
出现引入的css的type被拦截转换为"text/plain"问题
这是我开发过程中遇到的感觉很奇葩的问题，我们都知道，一般基于Vue-Cli，通过WebPack打包后的资源不需要更改什么。可是我发现，当我把代码进行上传后，输入网址，看见的页面把我吓坏了，发现所有样式不存在了，第一反应就是认为是自己在进行打包配置过程中出现了什么问题，然后通过fillder进行调试，发现css文件是正确获取到的
可以看到，这个css文件的type被拦截转换为"text/plain"，这时候，我又把相关的配置文件看了两遍，后面发现，真的是日了狗了，让我哭一会儿。先上图
我擦，原来是服务器端返回的类型居然是"text/plain"。这个问题很好解决，把这图直接给后端，是不是感觉被坑了/(ㄒoㄒ)/~~。
我们为什么选择了 VueJS：逐步迁移
综合考虑各方面因素，我们最终选择了 VueJS，但对于我们来说，最重要的决定性因素是：我们看到了一个清晰、可逐步迁移到 VueJS，而又不会破坏发展路径的迁移路径。实际上，我敢打赌，在整个迁移期间，我们的客户都没有注意到什么明显的变化，他们不会知道自己访问的页面中，哪些是 Angular 实现的，哪些是 VueJS 实现的。
Vue 采用了与 ReactJS 相似的技术，基于组件，属性下行事件上行等。它与 AngularJS 在模板引擎方面有着惊人的相似。它就像 AngularJS 和 ReactJS 的优美结合。这让我们觉得完美，因为我们有大量的 AngularJS 模板，而我们的主要问题是 Angular 组件带来的复杂逻辑。
实际上多数时候我们需要做的只是将代码中的 ng- 改为 v-，简直太美妙了!
随着深入，我们越发觉得作出了正确的选择，它解决了我们早期遇到的问题：很好的性能，单文件组件，清晰的代码结构，槽，等等。
而且，在迁移的过程中，由于 Vue 结构的方式(单向数据流，基于组件)，它迫使我们反思和重构代码，而不是继续写烂代码，这简化了我们的代码逻辑。
我还想说的最后一点，我发现 VueJS 的文档写得非常好，结构也非常清晰。这也是我们选择 VueJS 的另一个主要原因。我第一次使用 Vue 的时候，花了 30 分钟来阅读它的文档，立即觉得必须要试试这个东西。
作者简介：
陈老师
5年多前端工作经验，
主要分享：vue.js,等前端技术，微信开发
公众号：H5前端开发社区
掘金专栏：https://juejin.im/user/5901d6210ce463006153c6cc
本文已经获得陈老师授权转发，其他人若有兴趣转载，请直接联系作者授权。