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 相关文章推荐
Javascript与vbscript数据共享
Jan 09 Javascript
javascript div 弹出可拖动窗口
Feb 26 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 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
php 大数据量及海量数据处理算法总结
2011/05/07 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
详解php设置session(过期、失效、有效期)
2015/11/12 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
Python循环结构的应用场景详解
2019/07/11 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
经典安踏广告词
2014/03/21 职场文书
名人演讲稿范文
2014/09/16 职场文书
助学贷款贫困证明
2014/09/23 职场文书
债务授权委托书范本
2014/10/17 职场文书
民主生活会汇报材料
2014/12/15 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
java项目构建Gradle的使用教程
2022/03/24 Java/Android