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 相关文章推荐
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
javascript 常见功能汇总
Jun 11 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
微信小程序反编译的实现
Dec 10 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
js数组的操作详解
2013/03/27 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
2016/11/30 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
详解Django中的ifequal和ifnotequal标签使用
2015/07/16 Python
遗传算法python版
2018/03/19 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
使用Keras 实现查看model weights .h5 文件的内容
2020/06/09 Python
一文读懂Python 枚举
2020/08/25 Python
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
铭立家具面试题
2012/12/06 面试题
物流合作计划书
2014/01/10 职场文书
高考备战决心书
2014/03/11 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
面试感谢信范文
2015/01/22 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript
css弧边选项卡的项目实践
2023/05/07 HTML / CSS