Vue前端开发实训报告（Vue.js 前端项目在常见 Web 服务器上的部署配置）

Web 服务器是一种用于存储    
    
    
 ，处理和传输Web内容的软件   
    
    
    
。它是一种特殊类型的服务器    


     


     


     ，具有处理 HTTP 请求并向浏览器返回 Web 页面和其他内容的能力


     


     


     


 。Web服务器支持多种编程语言




 




 




 




，如 PHP   

   

   

，JavaScript     

     

     

     ，Ruby




  




  




  



，Python 等
  


  


  


，并且支持动态生成 Web 页面 




 




 




 。常见的 Web 服务器包括 Apache     
     
     
    ，Nginx 




   




   




   


，Microsoft IIS等   

   

   

   

。

一    
    
    
 、Nginx

Nginx 一般是前端项目部署首选的 Web 服务器

     

     

     

。

使用 Nginx 作为服务器部署 Vue 项目步骤如下：

安装 Nginx：如果还没有安装 Nginx

 



 



 



，请先安装它
  




  




  




  。

构建 Vue 项目：使用命令“npm run build   
    
    
    
”在 Vue 项目中构建生产版本的 Vue 项目  


  


  


  

。

复制 dist 文件夹：将生成的 dist 文件夹复制到 Nginx 的 html 文件夹中 
     
     
     
。

配置 Nginx：编辑 Nginx 的配置文件（通常为 nginx.conf）                  ，添加以下内容以配置对项目的访问：

server { listen 80; server_name your_domain_name; root /path/to/your/dist; index index.html; location / { try_files $uri $uri/ /index.html; } }

重启 Nginx：使用命令“nginx -s reload


     


     


     


 ”重启 Nginx

   




   




   




  。

浏览部署的 Vue 项目：通过浏览器访问 http://your_domain_name/  




    




    




    

，查看部署的 Vue 项目 



 



 



 

。

请注意：以上内容假设已经配置好了域名并将其映射到了服务器的 IP 地址                 。如果尚未配置域名

















，请相应地使用服务器的 IP 地址替代


    




    




    




  。

二    


     


     


     、Apache

使用 Apache 作为服务器部署 Vue 项目的步骤如下：

构建 Vue 项目：在 Vue 项目中使用命令“npm run build 




 




 




 ”构建生产版本的 Vue 项目
















。

安装 Apache：如果尚未安装 Apache                 ，请先安装 Apache                  。

配置 Apache：配置 Apache 以让其可以提供静态文件


     



     



     



  。可以通过在 Apache 配置文件中添加以下内容来完成此操作：

<Directory "/var/www/html"> Options Indexes FollowSymLinks AllowOverride None Require all granted </Directory>

复制文件：将生成的 dist 文件夹中的文件复制到 Apache 的根目录下的 /var/www/html 目录中















。

配置 URL 重写：安装 mod_rewrite 模块   



     



     



     
，然后在 Apache 配置文件中添加以下 URL 重写规则：

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

重启 Apache：使用命令“sudo service apache2 restart   

   

   

   

”重启 Apache   
    
    
    
。

测试：通过浏览器访问服务器的 IP 地址或域名


















，查看部署的 Vue 项目


     


     


     


 。

请注意：以上内容假设已经配置好了域名并将其映射到了服务器的 IP 地址 




 




 




 。如果尚未配置域名    
    
    
 ，请相应地使用服务器的 IP 地址替换   

   

   

   

。另外    


     


     


     ，配置文件路径和命令可能因操作系统不同而有所不同




 




 




 




，请根据实际情况进行调整

     

     

     

。

三




 




 




 




、IIS

使用 IIS 作为服务器部署 Vue 项目的步骤如下：

构建 Vue 项目：在 Vue 项目中使用命令“npm run build

     

     

     

”构建生产版本的 Vue 项目
  




  




  




  。

安装 IIS：如果尚未安装 IIS   

   

   

，请先安装 IIS  


  


  


  

。

创建站点：在 IIS 中创建一个新站点     

     

     

     ，将生成的 dist 文件夹中的文件复制到站点的根目录中 
     
     
     
。

配置 Default Document：在 IIS 中的站点配置中




  




  




  



，将“index.html
  




  




  




  ”设置为默认文档

   




   




   




  。

配置 URL 重写：安装 URL 重写模块（ARR：Application Request Routing）
  


  


  


，然后在 IIS 中的站点配置中添加以下 URL 重写规则：

<rule name="Handle History Mode and custom 404/500" stopProcessing="true"> <match url="^.*" /> <conditions logicalGrouping="MatchAny"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> </conditions> <action type="Rewrite" url="/" /> </rule> 启动站点：启动站点     
     
     
    ，通过浏览器访问站点 URL 查看部署的 Vue 项目 



 



 



 

。

请注意：以上内容假设已经配置好了域名并将其映射到了服务器的 IP 地址                 。如果尚未配置域名 




   




   




   


，请相应地使用服务器的 IP 地址替代


    




    




    




  。

四   

   

   

、Apache Tomcat

使用Apache Tomcat作为服务器部署Vue项目步骤如下：

安装Apache Tomcat：如果还没有安装Apache Tomcat

 



 



 



，请先安装它
















。

构建Vue项目：使用命令“npm run build  


  


  


  

”在Vue项目中构建生产版本的Vue项目                  。

复制dist文件夹：将生成的dist文件夹复制到Apache Tomcat的webapps文件夹中


     



     



     



  。

配置Context：在Tomcat的conf/server.xml文件中                  ，添加以下内容以配置对项目的访问：

<Context path="" docBase="your_project_name" />

启动Tomcat服务器：启动Tomcat服务器















。

浏览部署的Vue项目：通过浏览器访问 http://localhost:8080/your_project_name/  




    




    




    

，查看部署的Vue项目   
    
    
    
。

注意：以上内容假设使用的是Tomcat的默认端口8080


     


     


     


 。如果使用了其他端口

















，请相应地更改浏览器访问地址 




 




 




 。