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 相关文章推荐
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
javascript实现拖放效果
Dec 16 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
Nov 10 Javascript
jQuery代码优化方法总结
Jan 29 jQuery
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
Vue项目配置跨域访问和代理proxy设置方式
Sep 08 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
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
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
php 获取全局变量的代码
2011/04/21 PHP
微信access_token的获取开发示例
2015/04/16 PHP
PHP 错误处理机制
2015/07/06 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
python使用cPickle模块序列化实例
2014/09/25 Python
Python入门教程之运算符与控制流
2016/08/17 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
人机交互程序 python实现人机对话
2017/11/14 Python
python素数筛选法浅析
2018/03/19 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
Python实现微信消息防撤回功能的实例代码
2019/04/29 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
python编程的核心知识点总结
2021/02/08 Python
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
公司任命书模板
2014/06/06 职场文书
优秀党员学习焦裕禄精神思想汇报范文
2014/09/10 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
关于JS中的作用域中的问题思考分享
2022/04/06 Javascript