vue项目部署到Apache服务器中遇到的问题解决
作者:lazy-cody 时间:2024-05-22 10:42:36
最近刚重构完,我们的一个项目,由原来的jsp模式改为了前后端分离,前端选型为vue,开发完成之后第一件时间就是要部署测试,服务端选的是Apache。本来以为很简单的一件事情,几经坎坷部署了两天才算能够正常访问了。先记录如下,
过程搭建Apache环境,vue项目build之后把生成的dist文件放到,Apache下面,启动Apache之后本以为能够正常访问了,
前提说下:vue项目路由model:history ,默认不会出现下面的问题,因为个人感觉项目路径中带个#实在难受
但是发现错误如下:
无法正常访问,报了一堆404,由于接触vue项目不久,一脸懵逼,于是百度了一下内容如下(vue项目部署到Apache404错误)发现有很多解决方案,最常见的就是增加.htaccess,自己也按照网上方式操作了一遍,反复更改无效,当然有可能是自己配置的方式不对,反正我的是没有解决。
于是换了一个思路重新搜索了一下,看到了另一篇文章:https://www.cnblogs.com/xyyt/p/7718867.html 茅塞稍微开了一点,我的正常配置如下:
无非就是要把多的那一段路由信息去掉而已,尝试了如下变态的修改:
试着重新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],要添加项目所在文件的文件名,
来源:https://blog.csdn.net/unknownzyb/article/details/80367134
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python画一个玫瑰和一个爱心
python使用建议与技巧分享(一)
Django Channel实时推送与聊天的示例代码
![](https://img.aspxhome.com/file/2023/3/120473_0s.png)
Python实现新浪博客备份的方法
Pytorch自定义CNN网络实现猫狗分类详解过程
![](https://img.aspxhome.com/file/2023/3/72083_0s.png)
SQLServer查找字符串在另一字符串的索引位置
![](https://img.aspxhome.com/file/2023/8/110968_0s.gif)
nlp自然语言处理学习CBOW模型类实现示例解析
![](https://img.aspxhome.com/file/2023/8/76178_0s.jpg)
pandas处理csv文件的方法步骤
![](https://img.aspxhome.com/file/2023/3/83803_0s.png)
python检测远程端口是否打开的方法
Python办公自动化Word转Excel文件批量处理
![](https://img.aspxhome.com/file/2023/0/97410_0s.jpg)
Python查看Tensor尺寸及查看数据类型的实现
![](https://img.aspxhome.com/file/2023/1/82601_0s.png)
php实现mysql同步的实现方法
python连接kafka加载数据的项目实践
![](https://img.aspxhome.com/file/2023/2/89382_0s.png)
php 进阶:实现无限分类第1/4页
MySQL索引之主键索引
服务器XMLHTTP(Server XMLHTTP in ASP)基础知识
Python函数进阶与文件操作详情
![](https://img.aspxhome.com/file/2023/9/65849_0s.png)
在漏洞利用Python代码真的很爽
模拟下拉菜单[兼容IE系列以及火狐]
![](https://img.aspxhome.com/file/UploadPic/200912/13/menu-37s.gif)