【vue部署】Apache部署vue项目

Apache部署vue项目

[Apache 下载安装(windows)](#Apache 下载安装(windows))
- - [1. 下载](#1. 下载)
  - [2. 安装](#2. 安装)
  - [3. 启动服务](#3. 启动服务)
[vue 部署配置](#vue 部署配置)
- - [1. 基础配置](#1. 基础配置)
  - [2. 解决页面刷新问题](#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>

此时启动apache服务,第一次可以正常访问, 但刷新页面后，显示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 项目的所有步骤.