Vue应用部署到服务器的正确方式

这篇文章主要为大家详细介绍了Vue应用部署到服务器的正确方式，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

本文介绍了Vue应用部署到服务器，分享给大家，希望此文章对各位有所帮助。

很多时候我们发现辛辛苦苦写的VueJs应用经过打包后在自己本地搭建的服务器上测试没有什么问题，但真正放在服务器上后，会发现或多或少的问题，比如：页面出现空白现象，获取资源路径不对等，我相信以VueJs为技术栈来进行前端开发的小伙伴或多或少都会遇到这样的问题，我也遇到过，那现在我们就来一一解决这样的问题。

 

如何打包

 

1. 基于Vue-Cli,通过npm run build来进行打包的操作

 

如何部署

 

 

1. 将打包出来的资源，基于Vue-Cli的一般是dist目录下有static目录和index.html文件，可以直接将这两个文件扔到服务端
2. 但有时候，我们会直接将dist文件扔到服务端

 

出现的问题

 

1. 打包到服务器后，出现资源引用路径的问题
2. 打包到服务器后，出现空白页的问题
3. 打包到服务器后，出现引入的css的type被拦截转换为"text/plain"问题
4. 打包到服务器后，出现路由刷新404的问题

 

出现资源引用路径的解决方案

 

一般这个问题是由于在webpack配置打包发布的目录造成的。

 

情况一.

如果是将static与index.html直接放在服务器根目录,也就是说，当前的应用访问的网址如:http://www.xxx.com

 

解决办法：

配置输出的publiPath:"/"或者"./"

 

情况二.

直接将打包后的dist文件放在了服务器的根目录，也就是如果需要访问当前的应用，访问的网址

 

如:http://www.xxx.com/dist

解决办法：

首先需要在创建路由实例中增加：

代码如下：

const router = new VueRouter({
mode: 'history',
base: '/mobile/',
scorllBehavior: () => ({
y: 0
}),
routes
});

然后再打包发布目录:

publiPath:"/dist/"或者"http://www.xxx.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ㄒ)/~~。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/3253-0.html

注：关于Vue应用部署到服务器的正确方式的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js