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
更新vue
dist
包时,不需要重新启动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 FollowSymLinks AllowOverride All Require all granted DirectoryIndex 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 On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule>
方案1. 将配置添加到
<Directory>
中方案2. 在
vuep
下新建.htaccess
文件,并将配置写入
tip: 当Apache
服务启动失败时,可以先查看端口是否被占.
以上就是Apache
部署vue
项目的所有步骤.