本文主要详细介绍了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了吗

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。