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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
js文本框输入点回车触发确定兼容IE、FF等
Nov 19 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
javascript日期操作详解(脚本之家整理)
Sep 05 Javascript
JS实现自动变换的菜单效果代码
Sep 09 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 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 Mysql编程之高级技巧
2008/08/27 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP的explode和implode的使用说明
2011/07/17 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
使用 bootstrap modal遇到的问题小结
2016/11/09 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
pandas数据分组和聚合操作方法
2018/04/11 Python
Django实现学员管理系统
2019/02/26 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
对python中 math模块下 atan 和 atan2的区别详解
2020/01/17 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
python实现无边框进度条的实例代码
2020/12/30 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
自我鉴定写作要点
2014/01/17 职场文书
自荐信写法介绍
2014/01/25 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
幸福来敲门观后感
2015/06/04 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫