Vue.js 前端项目在常见 Web 服务器上的部署配置

Web 服务器是一种用于存储处理和传输Web内容的软件。它是一种特殊类型的服务器具有处理 HTTP 请求并向浏览器返回 Web 页面和其他内容的能力。Web服务器支持多种编程语言如 PHPJavaScriptRubyPython 等并且支持动态生成 Web 页面。常见的 Web 服务器包括 ApacheNginxMicrosoft 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添加以下内容以配置对项目的访问

server {
    listen 80;
    server_name your_domain_name;
    root /path/to/your/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

 

5重启 Nginx使用命令“nginx -s reload”重启 Nginx。

6浏览部署的 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 配置文件中添加以下内容来完成此操作

 

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

 

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

5配置 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>

 

6重启 Apache使用命令“sudo service apache2 restart”重启 Apache。

7测试通过浏览器访问服务器的 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 重写模块ARRApplication 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>

 

6启动站点启动站点通过浏览器访问站点 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文件中添加以下内容以配置对项目的访问

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

 

5启动Tomcat服务器启动Tomcat服务器。

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

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