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 相关文章推荐
javascript各种复制代码收集
Sep 20 Javascript
json原理分析及实例介绍
Nov 29 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
解决vue中对象属性改变视图不更新的问题
Feb 23 Javascript
一次让你了解全部JavaScript的作用域
Jun 24 Javascript
jquery插件实现悬浮的菜单
Apr 24 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
Python实现的计数排序算法示例
2017/11/29 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
python 实现"神经衰弱"翻牌游戏
2020/11/09 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
面包店的创业计划书范文
2014/01/16 职场文书
小区停车场管理制度
2014/01/27 职场文书
运动会跳远加油稿
2014/02/20 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
中秋节晚会开场白
2015/05/29 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript