apache2.4 部署 vue.cli3

前提

只是第一次写文章，主要用于记录，本人是个新手如果有不正确或有更好的方法也欢迎高手指出，当然如果能帮助到别人那更是很开心的事情。
所以言归正传，回归主题。用vue开发一个项目，所以为了测试服务器上能否正常使用，现在要在apache上进行部署，于是把部署的流程记录在这里。

部署环境

OS：Windows10
服务器：apache2.4.41
前端: Vue.cli3

安装及部署

安装

apache2.4.41

• 第一步，当然是下载apache。

  链接点击右边⇒（apache下载链接）

• 第二步， 解压缩。 解压缩时就需要注意喽。

  第一种: 直接解压缩在c盘根目录下(这种方法最简单，我喜欢选这种)
  第二种: 解压缩在自己像解压缩的地方(这种就有点点麻烦了)
  解压缩后，需要在apache文件夹中conf下的httpd.conf中设置一下路径(默认的是在c盘下的)，把默认地址改为你解压缩的地址

   change Define SRVROOT "c:/Apache24"  in httpd.conf, for example to "E:/Apache24"
  

第三步， 设置文件

这里需要设置一下httpd.conf文件，以便可以启动服务器。

• 取消掉下面代码中的 「#」
  这一步至关重要，直接影响你能否启动服务器(亲试，会出错的，名称不设定仿佛是不行的)

   #ServerName www.example.com:80
  

• 这是就可以启动服务器了(有自信的可调过这一步，直接部署vue的画面)
  点击apache文件的bin目录下的httpd.exe(或在此目录下的cmd中输入)来启动，如果是下面这样说明就已经启动了。
  
  在你的浏览器中输入本机地址(http://locathost)就可以显示出来个页面了。
  「It works」的画面哦，这里不粘贴了。

vue

这里就不说怎么安装了，有很多文章可以参考，这里作为部署，所以就跳过了。

部署

vue的打包

vue如果执行下面语句的话，是可以执行的。

npm run serve

但在服务器上这样可不行，需要进行打包，执行下面的语句。

npm run build

这样你就会得到一个dist的文件夹，所有的设置及页面都会在这个文件夹里面了。所以一会就需要把这个文件夹放入在apache文件夹中的htdocs文件夹中就可以了。切记哦。

修改httpd.conf文件

为了部署，需要修改apache中的httpd.conf文件，它在conf文件夹中。(可能是再次需改，取决于上文中的安装解压缩地址)。

• 修改LoadModule,其实就是搜下面的语句，把「#」去掉

   #LoadModule rewrite_module modules/mod_rewrite.so
  

• 修改AllowOverride，把none修改为ALL。这一步需要注意一下，这个应该是在下的语句，可不要修改错地方了。

   AllowOverride None → AllowOverride ALL
  

好了？

还没有哦，还有一个关键步骤，换指定目录地址地址哦。这一步很多文章都没有提及，估计是版本不一样或有别的方法设置或觉得这一步谁都会知道。不管怎么样反正如果不改这一步的话，应该显示不到vue页面。

• 修改DocumentRoot，这里是要指定打包好的vue模板地址上(此时应该已经按上面Vue的部署步骤把Vue打包好的dist文件夹放入htdocs文件夹中了)

   DocumentRoot "${SRVROOT}/htdocs" → DocumentRoot "${SRVROOT}/htdocs/dist"
  

• 修改，此语句在上一部修改语句的下面。 同样要把地址修改如下。

history模式设置

vue -router默认的是hash模式，这样链接里就会有「#」，看起来很难看，不像正常连接显示的好看。而设置history模式vue需要在服务器端也要进行设置。
vue-router里的官网上给出了apache服务器的设置。vue-router官网链接
在服务器端中的dist文件夹内，新建一个.htacces文件，在文件内写入如下语句。

  
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

这样histhoy模式就设置完成了。

完成

到此，初步部署已经完成，启动服务器，在浏览器中输入本机地址(http://locathost)应该已经可以显示出Vue界面了。