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

xcc3641 发布于2019-08-20 18:00 / 602人阅读

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

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

如何打包

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

如何部署

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

但有时候，我们会直接将dist文件扔到服务端

出现的问题

打包到服务器后，出现资源引用路径的问题

打包到服务器后，出现空白页的问题

打包到服务器后，出现引入的css的type被拦截转换为"text/plain"问题

打包到服务器后，出现路由刷新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ㄒ)/~~。

GPU云服务器云服务器 vue部署到云服务器视频教程阿里云轻应用服务器部署vue 如何部署应用到云服务器将应用部署到云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83999.html

网站子目录部署VUE webpack 打包资源文件路径的正确引用方式

摘要：是目前使用最为火热的打包工具，各大知名的框架类库都用其打包，国内使用最近也火热起来。但是坑也很多，比如说图片，字体等文件的路径。 webpack 是目前使用最为火热的打包工具，各大知名的框架类库都用其打包，国内使用最近也火热起来。它在单页应用和类库打包上帮助许多人从代码管理中解脱了出来，成为了当下风靡一时的打包工具。但是坑也很多，比如说图片，字体等文件的路径。刚开始用webpack...

zgbgx 2019-08-21 17:45 评论0 收藏0
vue开发项目完全指南

摘要：有两种方法，一种是在开发环境中设置通过的，另一种是在服务器上修改的配置设置。这样我们以后使用访问接口就可以不加了，打包后访问也不用手动去除统一管理在项目开发过程中，会涉及到很多接口的处理，当项目足够大时，就需要统一管理接口。这篇文章总结了vue项目的所遇到的问题，包括跨域、用户认证、接口统一管理、路由配置、兼容性处理，性能优化等内容。项目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 评论0 收藏0
（小白指南）在 Linux 服务器上安装 Nodejs、Nginx 以及部署 Web 应用

摘要：首先，的命令和并不能在全局使用。文章有意将浏览器不能访问服务器的两个问题写出来，是因为作者在排查问题的时候，发现在服务器直接访问的页面，能很好地检查排除问题在百度寻找问题答案的时候，发现这种做法也得到了不少人的肯定。前段时间要把项目部署到服务器，期间踩了不少的坑。故写下这篇文章，从零开始把自己部署的过程都记录下来，希望能给其他像我一样的小白一点帮助。如果有疏漏的地方，请各位客官指出，...

glumes 2019-07-25 14:06 评论0 收藏0