经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue.js 前端项目在常见 Web 服务器上的部署配置
来源:cnblogs  作者:yuzhihui  时间:2023/2/8 8:59:12  对本文有异议

Web 服务器是一种用于存储,处理和传输Web内容的软件。它是一种特殊类型的服务器,具有处理 HTTP 请求并向浏览器返回 Web 页面和其他内容的能力。Web服务器支持多种编程语言,如 PHP,JavaScript,Ruby,Python 等,并且支持动态生成 Web 页面。常见的 Web 服务器包括 Apache,Nginx,Microsoft IIS等。

 

一、Nginx

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

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

  1. 安装 Nginx:如果还没有安装 Nginx,请先安装它。

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

  3. 复制 dist 文件夹:将生成的 dist 文件夹复制到 Nginx 的 html 文件夹中。

  4. 配置 Nginx:编辑 Nginx 的配置文件(通常为 nginx.conf),添加以下内容以配置对项目的访问:

  1. server {
  2. listen 80;
  3. server_name your_domain_name;
  4. root /path/to/your/dist;
  5. index index.html;
  6. location / {
  7. try_files $uri $uri/ /index.html;
  8. }
  9. }
  1. 重启 Nginx:使用命令“nginx -s reload”重启 Nginx。

  2. 浏览部署的 Vue 项目:通过浏览器访问 http://your_domain_name/,查看部署的 Vue 项目。

请注意:以上内容假设已经配置好了域名并将其映射到了服务器的 IP 地址。如果尚未配置域名,请相应地使用服务器的 IP 地址替代。

二、Apache

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

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

  2. 安装 Apache:如果尚未安装 Apache,请先安装 Apache。

  3. 配置 Apache:配置 Apache 以让其可以提供静态文件。可以通过在 Apache 配置文件中添加以下内容来完成此操作:

  1. <Directory "/var/www/html">
  2. Options Indexes FollowSymLinks
  3. AllowOverride None
  4. Require all granted
  5. </Directory>
  1. 复制文件:将生成的 dist 文件夹中的文件复制到 Apache 的根目录下的 /var/www/html 目录中。

  2. 配置 URL 重写:安装 mod_rewrite 模块,然后在 Apache 配置文件中添加以下 URL 重写规则:

  1. <IfModule mod_rewrite.c>
  2. RewriteEngine On
  3. RewriteBase /
  4. RewriteRule ^index\.html$ - [L]
  5. RewriteCond %{REQUEST_FILENAME} !-f
  6. RewriteCond %{REQUEST_FILENAME} !-d
  7. RewriteRule . /index.html [L]
  8. </IfModule>
  1. 重启 Apache:使用命令“sudo service apache2 restart”重启 Apache。

  2. 测试:通过浏览器访问服务器的 IP 地址或域名,查看部署的 Vue 项目。

请注意:以上内容假设已经配置好了域名并将其映射到了服务器的 IP 地址。如果尚未配置域名,请相应地使用服务器的 IP 地址替换。另外,配置文件路径和命令可能因操作系统不同而有所不同,请根据实际情况进行调整。

三、IIS

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

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

  2. 安装 IIS:如果尚未安装 IIS,请先安装 IIS。

  3. 创建站点:在 IIS 中创建一个新站点,将生成的 dist 文件夹中的文件复制到站点的根目录中。

  4. 配置 Default Document:在 IIS 中的站点配置中,将“index.html”设置为默认文档。

  5. 配置 URL 重写:安装 URL 重写模块(ARR:Application Request Routing),然后在 IIS 中的站点配置中添加以下 URL 重写规则:

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

请注意:以上内容假设已经配置好了域名并将其映射到了服务器的 IP 地址。如果尚未配置域名,请相应地使用服务器的 IP 地址替代。

四、Apache Tomcat

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

  1. 安装Apache Tomcat:如果还没有安装Apache Tomcat,请先安装它。

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

  3. 复制dist文件夹:将生成的dist文件夹复制到Apache Tomcat的webapps文件夹中。

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

  1. <Context path="" docBase="your_project_name" />
  1. 启动Tomcat服务器:启动Tomcat服务器。

  2. 浏览部署的Vue项目:通过浏览器访问 http://localhost:8080/your_project_name/,查看部署的Vue项目。

注意:以上内容假设使用的是Tomcat的默认端口8080。如果使用了其他端口,请相应地更改浏览器访问地址。

 

原文链接:https://www.cnblogs.com/yuzhihui/p/17095524.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号