通过nginx部署前端Vue项目

1、 构建 Vue 项目

        首先，你需要将 我们的Vue 项目打包为静态文件。确保你已经安装了 Vue CLI 工具，并且你的项目可以正常运行。

1.1、打开终端，

进入你的 Vue 项目目录。

1.2、运行构建命令，

这条命令会在项目目录下生成一个 dist 文件夹，其中包含了所有需要部署的静态资源。

生成生产环境的静态文件：

npm run build

2、安装并配置 Nginx

如果你的服务器上还没有安装 Nginx，可以使用以下命令进行安装（以 Ubuntu 为例）：

sudo apt update
sudo apt install nginx

安装完成后，你需要配置 Nginx 以提供你的 Vue 应用。

2.1、配置 Nginx：

编辑 Nginx 配置文件（通常位于 /etc/nginx/nginx.conf 或者 /etc/nginx/sites-available/default）：

2.2、更新配置文件：

将配置文件修改为以下内容：

server {
    listen 80;
    server_name your_domain_or_IP;

    root /var/www/html/your_vue_project/dist;  # 修改为你的 dist 文件夹的路径
    index index.html;

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

    # Optional: Enable gzip for better performance
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

其中，your_domain_or_IP 是你的域名或服务器 IP 地址，/var/www/html/your_vue_project/dist 是 dist 文件夹的路径，你需要根据实际情况进行修改。

2.3、创建项目目录并复制文件：

将 Vue 构建生成的 dist 文件夹复制到 Nginx 的网页根目录下：

sudo cp -r /path/to/your/vue-project/dist /var/www/html/your_vue_project/

2.4、测试 Nginx 配置：

在终端中运行以下命令，以确保 Nginx 配置文件没有错误：

sudo nginx -t

2.5、重新加载 Nginx：

使配置更改生效：

sudo systemctl reload nginx

3. 访问你的 Vue 应用

        现在，你可以在浏览器中访问你的域名或服务器 IP 地址，应该能够看到你部署的 Vue 应用。

4. 附加配置（可选）

• 设置 HTTPS：为了更安全地提供服务，你可以使用 Let's Encrypt 和 Certbot 来为你的域名配置 SSL 证书。
• 配置缓存：通过 Nginx 配置缓存策略，可以提升静态资源的加载速度。

        通过上述步骤，你就可以成功地使用 Nginx 部署前端 Vue 项目，并且享受稳定、高效的静态文件服务。

原文地址：https://blog.csdn.net/xq_123dd/article/details/142187041

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！