Apache部署vue项目
- Apache 下载安装(windows)
- 1. 下载
- 2. 安装
- 3. 启动服务
- vue 部署配置
- 1. 基础配置
- 2. 解决页面刷新问题
Apache 下载安装(windows)
1. 下载
-
Apache 2.4.59
下载地址：httpd-2.4.59-240404-win64-VS17.zip -
Visual C++ Redistributable for Visual Studio 2015-2022 x64
下载地址：VC_redist.x64.exe
2. 安装
修改配置文件 D:/Apache24/conf/httpd.conf
- 修改服务器根目录为自己的Apache安装目录,如:
Define SRVROOT "D:\Apache24" - (非必须)为避免端口冲突，可以将默认的80端口修改为其他端口。如:
Listen 8080
3. 启动服务
-
管理员身份打开命令提示符,在
D:/Apache24/bin/文件夹下执行httpd -k install -n <服务器名>(服务器名自定义)
-
Win+R打开运行程序, 输入services.msc,查看服务，就会找到上一步执行的<服务器名>,选中服务，即可启动服务
-
在浏览器输入
http://localhost:8080即可访问页面，看到“It works!”.
8080为安装时配置的Listen端口
vue 部署配置
1. 基础配置
- 将
vue打包好的dist复制到D:/Apache24,并修改dist文件名为vuep
更新vuedist包时，不需要重新启动Apache服务 - 修改配置文件
D:/Apache24/conf/httpd.conf-
增加以下配置
Listen 8090 <VirtualHost *:8090>DocumentRoot "${SRVROOT}/vuep"ErrorLog "logs/local.com-error.log"CustomLog "logs/local.com-access.log" common<Directory "${SRVROOT}/vuep">Options Indexes FollowSymLinksAllowOverride AllRequire all grantedDirectoryIndex index.html</Directory> </VirtualHost>
Not Found.The requested URL was not found on this server.vue router配置
router配置了base属性时，打包时配置为base: '/vuep'
-
2. 解决页面刷新问题
-
启用
mod_rewrite模块,删除#LoadModule rewrite_module modules/mod_rewrite.so -
添加配置
# 使路由重定向到index.html<IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^index\.html$ - [L]RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.html [L]</IfModule>方案1. 将配置添加到
<Directory>中方案2. 在
vuep下新建.htaccess文件,并将配置写入
tip: 当Apache服务启动失败时,可以先查看端口是否被占.
以上就是Apache部署vue 项目的所有步骤.
