Windos系统下apache部署 history模式vue项目

1. Vue 设置history模式

A． 设置路由history模式；

B． Build前设置publicPath为部署项目的绝对路径

 

2. Apache安装与配置(官网：httpd.apache.org/)

A． 解压压缩包到指定目录；

B． 修改httpd.conf配置文件：主要修改根目录、部署文件目录、端口号和Allowoverride All（全修改）

 

C． 安装Apache的主服务：有了它，Apache才可启动。可以添加httpd.exe环境变量，然后打开cmd窗口，输入：httpd -k install -n Apache24

D． 启动Apache，

至此Apache安装完成，直接访问http://localhost:8085

 

3. 部署vue项目

A． 将npm run build打包后的项目，放到htdocs文件夹，并命名contract，此时访问http://localhost:8085/contract已经可访问，但是切换路由或页面刷新会显示404

出现404可以两种方式解决，以下分别为：

方法1: B． 在项目中新建.htaccess文件（解决页面刷新404）

C． 配置.htaccess

<IfModule mod_rewrite.c>

  RewriteEngine On

  RewriteBase /

  RewriteRule ^index\.html$ - [L]

  RewriteCond %{REQUEST_FILENAME} !-f

  RewriteCond %{REQUEST_FILENAME} !-d

  RewriteRule . /contract/index.html [L]

</IfModule>

方法2：

<Directory />
    
  AllowOverride All
  Require all denied
  
  #这里添加配置
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /contract/index.html [L]
</Directory>

  至此项目已经可正常访问，并刷新正常

 

4. Apache反向代理

配置完以上步骤，项目已经配置成功，但是有时候接口会报跨域问题，此时可配置反向代理，打开http.conf