vue发布到服务器,vue项目放到服务器

vue发布到服务器,vue项目放到服务器,Vue应用部署到服务器的正确方式

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

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

vue发布到服务器,vue项目放到服务器