很多时候，我们发现努力工作的VueJs应用程序在其自己的本地服务器上进行打包和测试。没有问题，但当它实际上放在服务器上时，它会发现或多或少的问题，例如空白页。获取资源路径并不相同。我相信使用VueJs作为前端开发技术堆栈的小伙伴会或多或少地遇到这样的问题。我也遇到过他们。现在我们将逐一解决这些问题。
怎么打包
基于Vue-Cli，由npm run build打包
如何部署
基于Vue-Cli打包的资源是dist目录中的静态目录和index.html文件。您可以直接将这两个文件扔到服务器上。
但有时，我们会将dist文件直接扔到服务器上。
问题
打包到服务器后资源引用路径出现问题
打包到服务器后的空白页问题
打包到服务器后，引入的css类型被拦截并转换为'text/plain'
在打包到服务器之后，路由刷新404存在问题
资源引用路径的解决方案
此问题通常是由webpack配置中打包和发布的目录引起的。
案例1.如果将static和index.html直接放在服务器根目录中，即当前应用程序访问URL，如:http://www.abc.com
解：
配置publiPath:'/'或'./'的输出
案例2.直接将打包的dist文件放在服务器的根目录中，也就是说，如果需要访问当前应用程序，请访问URL，如:http://www.abc.com/dist
解：
首先，您需要添加路由实例的创建：
Const router=new VueRouter（{
模式:'历史'，
基地:'/mobile /'，
scorllBehavior:（）=>
（{
是: 0
}），
路线
}）；
然后打包发布目录:
publiPath:'/dist /'或'http://www.abc.com/dist/'由于在路线的历史模式中刷新当前路线而出现404的问题
今天发出的应用程序被发布到服务器，并且发现当刷新当前路由时，将显示404的状态。事实上，这是
因为刷新当前页面时，在服务器上找不到需要访问的资源。也就是说，在VueJs开发应用程序的过程中，设置路径的路径不是真实路径，而是使用历史模式。
解
需要后端合作，请参阅https://router.vuejs.org/en/essentials/history-mode.html
引入的css类型被拦截并转换为'text/plain'
这是我在开发过程中遇到的一个非常奇怪的问题。我们都知道，基于Vue-Cli，WebPack打包的资源不需要更改。但是，我发现当我上传代码时，我输入了URL，我看到的页面吓到了我。我发现所有的风格都不存在。第一反应是认为我在包配置过程中遇到了问题。然后使用填充程序进行调试，并发现正确获取了css文件。
将Vue应用程序部署到服务器的正确方法
可以看出，该css文件的类型被截获并转换为'text/plain'。这时，我读了两次相关的配置文件。后来，我发现它真是一只狗，让我哭了一会儿。第一张照片
将Vue应用程序部署到服务器的正确方法
我擦了，服务器返回的原始类型实际上是'text/plain'。这个问题很好地解决了。如果你将这张照片直接传递到后端，你觉得它是凹坑/（ㄒoㄒ）/~~。

• 上一篇: 蓝盟IT外包，元宇宙：四梁八柱是什么
  下一篇: IPv6普及还很早，如何在Ubuntu系统中禁用IPv6协议

• 分享到：