本文主要详细介绍了Vue应用部署到服务器的正确方法，有一定的参考价值，感兴趣的朋友可以参考一下。
本文介绍Vue应用部署到服务器，与大家分享。希望这篇文章对你有帮助。
很多时候，我们发现辛辛苦苦编写的VueJs应用在自己的本地服务器上打包测试后没有任何问题，但实际放到服务器上时，我们会或多或少的发现一些问题，比如空白页、资源访问不对等。相信使用VueJs作为技术栈进行前端开发的小伙伴们或多或少都会遇到这样的问题，我也遇到过。现在，让我们逐一解决这些问题。
如何打包
在Vue-Cli的基础上，使用npm run build进行封装。
如何部署
打包的资源，基于Vue-Cli，一般在dist目录下有静态目录和index.html文件，可以直接扔给服务器。
但是有时候，我们直接把dist文件扔给服务器。
出现的问题
打包到服务器后，资源引用路径有问题。
打包到服务器后，存在空白页的问题。
在被打包到服务器后，引入的css的类型被截取并转换成‘text/plain’。
在打包到服务器之后，存在路由刷新404的问题。
具有资源引用路径的解决方案。
这个一般性问题是由于在webpack中配置打包和发布目录而导致的。
情况一.
如果静态和index.html直接放在服务器的根目录下，也就是说当前应用访问http://www.xxx.com等网站。解决方案：
已配置的发布路径：“/”或”。/
情况二.
直接把打包好的dist文件放在服务器的根目录下，也就是如果需要访问当前的应用，访问URL。例如：http://www.xxx.com/dist
解决方案：
首先，您需要添加：
const router=new VueRouter({
模式：“历史”，
基底：/mobile/，
scorl behavior:()=({
y: 0
}),
路线
});
然后打包发布目录：
PubliPath:“/dist/”或“http://www.xxx.com/dist/
出现由于路由的history模式下刷新当前路由出现404的问题
今天的应用发布在服务器上，发现刷新当前路由时，会出现404的状态。其实这是因为刷新当前页面时，在服务器上找不到需要访问的资源。也就是说，在VueJs中开发应用的过程中，路由设置路径并不是真实路径，使用的是历史模式。
解决办法
需要后端合作，参考https://router.vuejs.org/en/essentials/history-mode.html.
引入的css的类型被截取并转换成‘text/plain’问题。
这是我在开发过程中遇到的一个很奇妙的问题。众所周知，一般基于Vue-Cli，通过WebPack打包的资源是不需要改动的。但是我发现当我上传代码，输入网址的时候，看到的页面吓了我一跳，发现所有的样式都不存在了。我的第一反应是觉得在打包配置的过程中出了问题，然后通过fillder调试，发现css文件获取正确。
正如您所看到的，这个css文件的类型被拦截并转换为“text/plain”。这时候我又看了两遍相关配置文件，后来发现真的是狗，让我哭了一会儿。尚途
妈的，原来服务器返回的类型居然是‘text/plain’。这个问题很容易解决。你感觉到trapped/(12562了吗
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
