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


Posted in Javascript onJuly 15, 2017

本文介绍了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文件是正确获取到的

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

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

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

我擦,原来是服务器端返回的类型居然是"text/plain"。这个问题很好解决,把这图直接给后端,是不是感觉被坑了/(ㄒoㄒ)/~~。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
广告显示判断
Aug 31 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
Sep 05 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
js+html5实现侧滑页面效果
Jul 15 #Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 #Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 #Javascript
js编写简单的计时器功能
Jul 15 #Javascript
深入理解angular2启动项目步骤
Jul 15 #Javascript
js+html5实现复制文字按钮
Jul 15 #Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 #Javascript
You might like
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
PHP把小数转成整数3种方法
2014/06/30 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
基于JQUERY的多级联动代码
2012/01/24 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
vue.js中npm安装教程图解
2018/04/10 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
使用Python对Excel进行读写操作
2017/03/30 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
Django ORM多对多查询方法(自定义第三张表&ManyToManyField)
2019/08/09 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
感恩主题班会教案
2015/08/12 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫