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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
Dec 23 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
用vue设计一个日历表
Dec 03 Vue.js
js实现弹框效果
Mar 24 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 VS ASP
2006/10/09 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
php实现微信发红包功能
2018/07/13 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
页面中body onload 和 window.onload 冲突的问题的解决
2009/07/01 Javascript
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
vue和webpack安装命令详解
2018/06/15 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
让 python 命令行也可以自动补全
2014/11/30 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
C语言开发工程师测试题
2016/12/20 面试题
语文教学感言
2014/02/06 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
青年文明号汇报材料
2014/12/23 职场文书
诚信教育主题班会
2015/08/13 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js
Python实现Hash算法
2022/03/18 Python
redis lua限流算法实现示例
2022/07/15 Redis