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

栏目: JavaScript · 发布时间: 5年前

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

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

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

如何打包

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

如何部署

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

出现的问题

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

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

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

  • 情况一.如果是将static与index.html直接放在服务器根目录,也就是说,当前的应用访问的网址如:http://www.abc.com
  • 解决办法:
配置输出的publiPath:"/"或者"./" 
  • 情况二.直接将打包后的dist文件放在了服务器的根目录,也就是如果需要访问当前的应用,访问的网址如:http://www.abc.com/dist
  • 解决办法:
  • 首先需要在创建路由实例中增加:
const router = new VueRouter({ 
 
mode: 'history', 
 
base: '/mobile/', 
 
scorllBehavior: () => ({ 
 
y: 0 
 
}), 
 
routes 
 
}); 

然后再打包发布目录:

publiPath:"/dist/"或者"http://www.abc.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文件是正确获取到的

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

可以看到,这个css文件的type被拦截转换为"text/plain",这时候,我又把相关的配置文件看了两遍,后面发现,真的是日了狗了,让我哭一会儿。先上图

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

我擦,原来是服务器端返回的类型居然是"text/plain"。这个问题很好解决,把这图直接给后端,是不是感觉被坑了/(ㄒoㄒ)/~~。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

图解机器学习

图解机器学习

杉山将 / 许永伟 / 人民邮电出版社 / 2015-4 / 49

本书用丰富的图示,从最小二乘法出发,对基于最小二乘法实现的各种机器学习算法进行了详细的介绍。第Ⅰ部分介绍了机器学习领域的概况;第Ⅱ部分和第Ⅲ部分分别介绍了各种有监督的回归算法和分类算法;第Ⅳ部分介绍了各种无监督学习算法;第Ⅴ部分介绍了机器学习领域中的新兴算法。书中大部分算法都有相应的MATLAB程序源代码,可以用来进行简单的测试。 本书适合所有对机器学习有兴趣的初学者阅读。 187张图......一起来看看 《图解机器学习》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具