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据option的value值快速设定初始的selected选项
Aug 13 Javascript
JavaScript 密码强度判断代码
Sep 05 Javascript
js创建数据共享接口——简化框架之间相互传值
Oct 23 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
javaScript封装的各种写法
Aug 14 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
字节飞书面试promise.all实现示例
Jun 16 Javascript
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
substr()函数中文版
2006/10/09 PHP
php foreach、while性能比较
2009/10/15 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
javascript div 弹出可拖动窗口
2009/02/26 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
cookie的secure属性详解
2015/04/08 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
python如何读取bin文件并下发串口
2019/07/05 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
python中添加模块导入路径的方法
2021/02/03 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
无工作经验者个人求职信范文
2013/12/22 职场文书
安全演讲稿开场白
2014/08/25 职场文书
领导班子“四风问题”“整改方案
2014/10/02 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
先进个人自荐书
2015/03/06 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
python lambda 表达式形式分析
2022/04/03 Python