Vue:基于xampp集成的Apache服务器进行线上部署

因为我暂时没有购买云服务器，所以本博客是基于本地模拟线上部署；模拟项目是Vue+Express+mongoDB搭建而成的项目;

• 后台代码部署
• 前端代码部署

一、后台代码部署

• 首先，express是基于nodeJs的运行环境，所以服务器需要安装nodeJs；
• 通过cmd打开express后台项目；
• node bin/www启动后台代码；
• 后台代码部署完成。

注意：express代码部署需要关注端口号是否被占用？

二、前端代码部署

• 修改前端vue项目代码的打包配置，设置静态资源的公共路径；
  
• npm run build打包前端文件；
• 将打包生成的dist文件夹移至/xampp/htdocs/文件夹下；
• 本地模拟配置域名，打开本地hosts文件；C:\Windows\System32\drivers\etc\hosts
  
  然后测试域名是否配置成功
• 由于此次项目是前后端分离项目，后端和前端代码服务器不同，则需对前端的apache服务器配置代理；
• 配置虚拟主机，在xampp 文件夹下找到 httpd-vhosts.conf(虚拟主机配置文件)/apache/conf/extra/httpd-vhosts.conf

NameVirtualHost *:80  //找到此行代码去除注释
//配置如下代码
<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot "D:/Software/xampp/xampp/htdocs"
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin [email protected]
    DocumentRoot "D:/Software/xampp/xampp/htdocs/imocdemo"
    ServerName imocdemo.com //为本地hosts配置的地址
    ProxyRequests Off
    <Proxy /goods>  
        Order deny,allow  
        Allow from all  
    </Proxy> 
    ProxyPass  /goods  http://127.0.0.1:3000/goods  //接受请求的接口地址
    ProxyPassReverse /goods http://127.0.0.1:3000/goods
    <Proxy /users>  
        Order deny,allow  
        Allow from all  
    </Proxy> 
    ProxyPass  /users  http://127.0.0.1:3000/users 
    ProxyPassReverse /users http://127.0.0.1:3000/users   
</VirtualHost>

• 配置反向代理，找到\xampp\apache\conf\httpd.conf

Include conf/extra/httpd-vhosts.conf  //找到此行代码去除注释
//找到以下代码去除注释
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_connect_modulemodules/mod_proxy_connect.so
LoadModule proxy_ftp_modulemodules/mod_proxy_ftp.so
LoadModule proxy_http_modulemodules/mod_proxy_http.so

• 配置完之后保存，重启apache服务