Vue 项目部署到服务器的问题解决方法


Posted in Javascript onDecember 05, 2017

相信很多小伙伴在用Vue-cli安装的脚手架开发的时候,在开发环境中项目可以很正常的运行,但是进入到生产环境,编译打包后,放入服务器,项目就不正常了,会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张,正确的配置加上后端的简单配合就可以解决。

如何打包

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

如何部署

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

出现的问题

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

下面笔者根据自己Vue项目从编译打包到正常部署服务器的经验,来告诉大家如何解决这些问题。

一、前端配置:

①、router配置--指定路由起始(在开发模式中,Vue项目被放在了webpack配合nodeJs生成的本地服务器的根目录,但是在真实服务器中,项目肯定不会放在根目录,所以要指定router的base)

Vue 项目部署到服务器的问题解决方法

router

提前和后端商量好项目部署的服务器文件夹路径

②、编译打包配置

进入config --> index.js

Vue 项目部署到服务器的问题解决方法

build

③、使用npm run build进行打包,至此前端能做的配置已经做完

二、后端配置:

路由跳转出现404,主要原因是后端对这个虚拟的前端路由没有做任何处理,服务器在找不到指定路径下的资源时,只能向客户端返回404。

解决办法(Apache):进行url重写 --- 将Vue项目所在服务器文件夹下的路径,例如:

leibo.group/pcMall/.... 重写为 leibo.group/pcMall/index.html

Vue 项目部署到服务器的问题解决方法

.hatccess

具体的Apache开启allowoverride ,url重写,后端分分钟就解决了

如果是其他类型服务器

请自行参考https://router.vuejs.org/zh-cn/essentials/history-mode.html

总结:在单页面部署服务器中,其实更多的是思想的改变,利用前端路由来控制用户界面内容的变更,以上就是笔者在项目部署服务器中的一些经验,如果有什么阐述的不当的地方,还望指出!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一直复略了的一个问题,关于表单重复提交
Feb 15 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
javascript Array对象基础知识小结
Nov 16 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
jQuery冲突问题解决方法
Jan 19 jQuery
webpack学习教程之前端性能优化总结
Dec 05 #Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 #Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 #Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 #Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 #Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 #Javascript
浅谈 vue 中的 watcher
Dec 04 #Javascript
You might like
PHP编程与应用
2006/10/09 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
PHP通过加锁实现并发情况下抢码功能
2016/08/10 PHP
php对象工厂类完整示例
2018/08/09 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
PHP与Web页面的交互示例详解一
2020/08/04 PHP
js 页面输出值
2008/11/30 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python发展简史 Python来历
2019/05/14 Python
深入解析神经网络从原理到实现
2019/07/26 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
win10系统Anaconda和Pycharm的Tensorflow2.0之CPU和GPU版本安装教程
2019/12/03 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Python利用逻辑回归分类实现模板
2020/02/15 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
学生自我鉴定范文
2013/10/04 职场文书
你懂得怎么写自荐信吗?
2013/12/27 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
党支部综合考察意见
2015/06/01 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
PO模式在selenium自动化测试框架的优势
2022/03/20 Python