【开发小记】在apache服务器上部署vue项目

GUANYX~

已于 2022-09-19 09:38:37 修改

阅读量8.5k

点赞数 4

分类专栏：前端学习笔记文章标签： vue相关

于 2019-11-19 16:43:25 首次发布

本文链接：https://blog.csdn.net/gyx1549624673/article/details/103144879

版权

前端学习笔记专栏收录该内容

56 篇文章 0 订阅

订阅专栏

一、服务器安装apache

我的服务器是CentOS7的环境

直接用yum安装
首先查看相关安装包

yum list httpd

接着选择一个安装就行

yum install httpd.x86_64

我的安装情况如下
在这里插入图片描述
安装过程有一个选择，y就成；安装成功是这样的（中间就省略了）

二、apache服务相关操作

开启、关闭、重启

systemctl start httpd.service #启动

systemctl stop httpd.service #停止

systemctl restart httpd.service #重启

设置开机启动/关闭

systemctl enable httpd.service #开机启动

systemctl disable httpd.service #开机不启动

检查httpd相关状态

systemctl status httpd.service

启动apache服务后，我们输入安装了apache的服务器ip到浏览器就可以看到apache的默认页面了

三、更改apache相关配置

我们看到的默认页面是放在/var/www/html目录中，我们可以将保存目录更改到自己想要的地方。例如将保存网站数据的目录修改为/home/wwwroot目录

1.建立网站数据保存目录，并开创一个例子作为首页
在这里插入图片描述
2.打开httpd服务器的主配置文件，将约119行用于定义网站保存路径的参数DocumentRoot和约124行这样用于定义目录权限参数的Directory修改如下
输入vim /etc/httpd/conf/httpd.conf
进行修改如下

3.重启httpd服务即可见修改成功

systemctl restart httpd.service #重启

四、配置打包vue项目

最后我想将整个项目放到/home/wwwroot/ebackup文件夹下，于是配置vue如下

1.修改config下的index.js如下
在这里插入图片描述
主要就是assetsPublicPath:'/ebackup/'

2.修改router下的index.js如下
在这里插入图片描述
主要就是base: '/ebackup',

3.修改以上几处后打包

npm run build

打包成功后项目的dist文件夹下会生成如下文件
在这里插入图片描述
将它们上传到服务器/home/wwwroot/ebackup下

这时再访问服务器ip/ebakcup/index.html即可查看到我们自己的项目了

五、解决刷新后显示404问题

上面的步骤进行完毕后，虽然可以访问，但是刷新或者用url栏访问某个子页面就会出现404，这是由于vue路由的mode是history模式。
修改apache的配置文件httpd.conf

vim /etc/httpd/conf/httpd.conf

修改如下
在这里插入图片描述
即如下代码，其中ebackup即我的项目存放的目录

AllowOverride all
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /ebackup/index.html [L]

然后再次重启apache服务