李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

综合教程：在 Windows、Mac、CentOS 及 Docker Desktop 环境下部署前端 Vue 项目 ​

本教程将指导你如何在不同的操作系统（Windows、Mac、CentOS）和 Docker Desktop 环境下使用 Nginx 部署前端 Vue 项目。这些步骤适用于任何通过 npm run build 构建的前端项目，不仅限于 Vue。

一、在 Windows、Mac 和 CentOS 上部署 Vue 项目 ​

步骤 1：构建 Vue 项目

在项目根目录下执行以下命令来构建你的 Vue 应用。这将在 dist/ 目录下生成生产环境的文件。

bash
npm run build

步骤 2：安装 Nginx

  • Windows：访问 Nginx 官网 下载并解压 Nginx。
  • Mac：使用 Homebrew 安装，命令：brew install nginx。
  • CentOS：首先添加 EPEL 仓库，然后使用 yum 安装 Nginx：
    bash
    sudo yum install epel-release
sudo yum install nginx

步骤 3：配置 Nginx

编辑 Nginx 配置文件（位置可能根据操作系统和安装方式有所不同），配置一个新的 server 块来服务你的 Vue 应用。

nginx
server {
    listen       80;
    server_name  your_domain.com;  # 替换为你的域名或本地 IP

    location / {
        root   /path/to/your/vue/project/dist;  # Vue 项目构建目录的路径
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;  # 用于支持 Vue Router 的 history 模式
    }
}
  • Windows：Nginx 配置文件通常位于 nginx-1.xx.x/conf/nginx.conf。
  • Mac：配置文件通常位于 /usr/local/etc/nginx/nginx.conf。
  • CentOS：配置文件通常位于 /etc/nginx/nginx.conf。

步骤 4：启动（重启）Nginx

  • Windows：运行 start nginx 命令或重启 Nginx 服务。
  • Mac：运行 sudo nginx 启动或 sudo nginx -s reload 重启 Nginx。
  • CentOS：
    bash
    sudo systemctl start nginx
sudo systemctl enable nginx  # 设置 Nginx 开机自启

二、在 Docker Desktop 环境下部署 Vue 项目 ​

步骤 1：准备 Dockerfile 和 Nginx 配置

在 Vue 项目的根目录创建 Dockerfile 和 default.conf（Nginx 配置文件）。

  • Dockerfile

    Dockerfile
    FROM nginx:stable-alpine
COPY dist/ /usr/share/nginx/html
COPY default.conf /etc/nginx/conf.d/default.conf

  • default.conf

    nginx
    server {
    listen       80;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

步骤 2：构建和运行 Docker 容器

在项目根目录下运行以下命令构建 Docker 镜像，并启动容器。

bash
docker build -t vue-app .
docker run -d -p 8080:80 --name vue-nginx vue-app

访问 http://localhost:8080 或你配置的其他端口，你应该能看到你的 Vue 应用运行起来。

总结 ​

以上是在不同环境下部署前端 Vue 项目的详细步骤，从传统的操作系统环境到现代的 Docker 容器化部署，这些指南都应该能够帮助你顺利部署你的 Vue 应用。每个环境

的配置都略有不同，确保根据你的具体需求调整 Nginx 配置和 Docker 设置。