在apache服务器上部署vue项目

一、服务器安装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服务

systemctl restart httpd.service #重启

到此为止，vue项目部署完毕。

如果遇到没有权限访问，可以用下面这句，赋予相关权限，使之能够访问我们新建的/home/wwwroot/ebackup文件夹下的内容

chmod 777 -Rf /home/wwwroot/ebackup

GUANYX~

发布了91 篇原创文章 · 获赞 28 · 访问量 3万+

私信关注