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 相关文章推荐
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
Jan 05 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
vue实现表单录入小案例
Sep 27 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
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
php常见的魔术方法详解
2014/12/25 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
基于pytorch的保存和加载模型参数的方法
2019/08/17 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
Chi Chi London官网:购买连衣裙和礼服
2020/10/25 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
Python OpenGL基本配置方式
2022/05/20 Python