1.官网下载apache服务器,解压;
2.打包vue项目:
在工程根目录下,执行cmd命令行:npm run build,等待完成后,项目会被打包到项目的同级dist目录中。
3.在apache服务器中部署项目:
将dist下的所有打包好的文件复制到 ..\apache\htdocs 目录中;
4.设置服务器根路径:
在配置文件:..\apache\conf\httpd.conf中,找到 DEFINE SRVROOT,修改为你解压apache服务器的根目录;
5.设置服务器端口号:
在上述的配置文件中找到Listen 80,这里默认的端口号是80,可以根据自己的需求修改;
6.如何项目中使用了vue-router并且路由模式为"history",需要设置服务器的配置,否则在浏览器中直接输入路由地址,会报404错误,具体设置如下:
依然在之前的配置文件中,找到<Directory />配置,修改如下:
<Directory />
AllowOverride All
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</Directory>
然后打开RewriteEngine,在配置文件中找到:
LoadModule rewrite_module modules/mod_rewrite.so 去掉前面的注释'#'符号;
7.启动apache服务器:
双击执行 ..\apache\bin\httpd.exe