一.安装配置apache

        一般来讲做内网服务器项目应该整一个linux服务器，不过作者的公司配置的都是win服务器，所以以下内容皆以win为准。

        首先我们需要登录apache的官网下载安装一个win官方版本。

        下载地址http://httpd.apache.org/

        

        如图所示，下载一个最新的realease版本，点击download。

         

        然后点击下载一个微软windows专用版。

        接下来在D盘（或者别的地方）建一个apache文件夹，把下载好的压缩包解压进去。

         打开bin文件夹，找到httpd.exe。

复制这段路径，添加进系统环境变量path。

打开conf/httpd.conf文件，修改这一段。 

 

注意这里是把根目录指定到apache24这个文件夹，如果你的安装目录不一样，这里也要跟着改。

 

修改监听端口号。默认80端口，如果80被占用了就改成别的，否则不用改。

 

修改文件路径。因为vue项目生成的html文件需要指定一个路径存放，这里对存放路径进行配置。

（默认是htdocs，不过也可以改成别的）

最后，把Apache安装为Windows Service，以管理员的方式打开CMD.输入：     

httpd -k install -n Apache

按回车键。安装成功后查看服务管理器，会出现Apache服务，设置成开机自启动。

重启电脑，然后运行apache/bin目录下的apachemonitor.EXE。

 

点击 start，这样你的apache服务就启动好了。 

二.打包部署vue项目

        这一步的重点在于vue项目的配置。

        一般而言vue项目都是基于现成的cli脚手架搭建，那么需要用到的配置文件，一个是router路由文件夹下的index.js，一个是config文件夹下的index.js。

        对于本文而言，因为作者使用的是vue-element-admin这个开源项目，所以没有config文件夹，而是直接用vue.config.js文件进行配置。

        1.配置config

        

 

        配置publicPath目录。这个目录对应的是apache里的页面目录下的子目录，即apache/htdocs/+ publicPath。vue项目生成的index.html文件到时候需要放到这个目录下。

        2.配置router/index.js

         

        同理，base的配置和1中的publicPath配置一致。

        然后mode有两种模式，一种是hash，一种是history，这里选择使用history。

        3.生成项目文件

        在控制台中进行生产

        输入命令： npm run build

        有些项目根据开发环境和测试环境不同，可能会在build后加参数，参考项目的readme文件即可。

         

         之后打开工程文件夹，在/dist文件夹下发现build好的文件。

拷贝所有文件到apache里配置的文件夹目录下。

到这里已经可以使用了。

在浏览器中输入地址 localhost/vue/index.html 进入主页。

但是需要注意的是，如果不进行路由配置，页面跳转之后会找不到路由，报404错误。

所以还需要进行最后一步。

4.配置apache

在apache 的vue 目录下新建.htaccess文件, 需要修改RewriteRule 为/vue/index.html, 否则刷新页面服务端会直接报404错误。

.htaccess文件内容

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /vue/index.html [L]
</IfModule>

 

 然后打开conf目录下的httpd.conf，找到

#LoadModule reqtimeout_module modules/mod_reqtimeout.so
LoadModule rewrite_module modules/mod_rewrite.so
#LoadModule sed_module modules/mod_sed.so

在默认的代码段中，loadmodule  mod_rewrite.so 是被注释掉的，这里需要将注释解开以开放rewrite功能。

最后，修改directory配置

#
# Deny access to the entirety of your server's filesystem. You must
# explicitly permit access to web content directories in other 
# <Directory> blocks below.
#
<Directory />
    AllowOverride all
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ./vue/index.html [L]   
</Directory>

 到此，apache的配置全部结束。

三.测试项目

        在前文中apache配置完成后，可以进入cmd进行测试

        输入： httpd -t，检查配置文件是否正确书写。如果报错，需要根据报的错进行修改。

        检查通过之后，在apacheMonitor中重启apache服务。

        登录localhost/vue/index.html，加载出项目。