vue项目部署到Apache服务器中遇到的问题解决


Posted in Javascript onAugust 24, 2018

最近刚重构完,我们的一个项目,由原来的jsp模式改为了前后端分离,前端选型为vue,开发完成之后第一件时间就是要部署测试,服务端选的是Apache。本来以为很简单的一件事情,几经坎坷部署了两天才算能够正常访问了。先记录如下,

过程搭建Apache环境,vue项目build之后把生成的dist文件放到,Apache下面,启动Apache之后本以为能够正常访问了,

前提说下:vue项目路由model:history ,默认不会出现下面的问题,因为个人感觉项目路径中带个#实在难受

但是发现错误如下:

vue项目部署到Apache服务器中遇到的问题解决

无法正常访问,报了一堆404,由于接触vue项目不久,一脸懵逼,于是百度了一下内容如下(vue项目部署到Apache404错误)发现有很多解决方案,最常见的就是增加.htaccess,自己也按照网上方式操作了一遍,反复更改无效,当然有可能是自己配置的方式不对,反正我的是没有解决。

于是换了一个思路重新搜索了一下,看到了另一篇文章:https://www.cnblogs.com/xyyt/p/7718867.html 茅塞稍微开了一点,我的正常配置如下:

vue项目部署到Apache服务器中遇到的问题解决

无非就是要把多的那一段路由信息去掉而已,尝试了如下变态的修改:

vue项目部署到Apache服务器中遇到的问题解决

试着重新build发布一下到Apache,奇迹的事情发生了,没问题了,一切正常,当然我的修改方式我也感觉不是很妥当,当实在找不到合适方式,只能暂时这样的修改,所有的路径都按照上面的修改,就能够正常访问了

vue项目部署到服务器页面空白的问题

  • 路由跳转的时候使用mode: 'history'去掉#号,放到服务器crm目录下,根据www.asa.com/crm路径访问,出现获取不到资源问题,页面一片空白,搜索问题,路由配置文件中添加mode: 'history', base: '/crm/',。
  • 然后资源都获取到了也都加载了但是页面还是空白,没有进行渲染(这个问题好像和问题1相同,当时没有记录下来现在回忆起来有点模糊),通过后端配置解决了问题。
  • 页面渲染成功各页面跳转页都正常了,但是又出现了在当前页面刷新都会出现404的问题,因为只有一个index.html文件,url中的路由跳转都是vue-router进行在实际文件中没有login.html等文件,服务器在找这些页面会找不到出现404错误,因此需要后端服务器配置进行404全部跳转到index.html解决问题。
  • 闲着没事有想到问题3,后端到底如何配置的,自己就实现了一遍,以mac下自带apache为例进行配置
    • 到mac下apache安装路径/private/etc/apache2/httpd.conf中, (apahce的配置文件)

开启rewrite_module功能,

LoadModule rewrite_module libexec/apache2/mod_rewrite.so,去掉前面的#;

DocumentRoot "/users/Dev/sites"(设置apache默认指向目录)
<Directory "/users/Dev/sites">
Options Indexes FollowSymLinks Multiviews
MultiviewsMatch Any
AllowOverride All
Require all granted
</Directory>

设置AllowOverride All是为了使apache支持.hatccess文件。

* 在该项目根目录添加.hatccess文件(index.html平级),内容跟https://router.vuejs.org/zh-cn/essentials/history-mode.html‘>HTML5 History 模式(vue-router文档举例)类似,

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /crm/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /crm/index.html [L]
</IfModule>

,需要修改的两个地方,RewriteBase /crm/;

RewriteRule . /crm/index.html [L],要添加项目所在文件的文件名,

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

Javascript 相关文章推荐
UserData用法总结 lanyu出品
Jul 01 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
各种常用的JS函数整理
Oct 25 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
基于JS实现web端录音与播放功能
Apr 17 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 #Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 #Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 #Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 #Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 #Javascript
微信小程序支付PHP代码
Aug 23 #Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 #Javascript
You might like
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
js获取当前日期代码适用于网页头部
2013/06/27 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
基于node.js实现微信支付退款功能
2017/12/19 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
React 实现拖拽功能的示例代码
2019/01/06 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
python实现简单图片物体标注工具
2019/03/18 Python
python批量下载抖音视频
2019/06/17 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
客服主管岗位职责
2013/12/13 职场文书
高中班主任评语大全
2014/04/25 职场文书
学生手册评语
2014/05/05 职场文书
2015年机关党建工作总结
2015/05/22 职场文书
红楼梦读书笔记
2015/06/25 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书