Vue 多页应用部署最佳实践：Nginx 部署指南

2024-01-27 03:10:42

序言

多页应用（MPA）在现代 Web 开发中广泛应用，它提供了更精细的代码拆分，提升了性能和可维护性。本文旨在分享 Vue 多页应用在 Nginx 下的部署最佳实践，帮助开发者有效解决部署过程中遇到的难题。

Nginx 部署多页应用

多应用部署

步骤 1：配置 Nginx 虚拟主机

server {
    listen 80;
    server_name example.com;

    location /app1 {
        root /path/to/app1/dist;
        index index.html;
    }

    location /app2 {
        root /path/to/app2/dist;
        index index.html;
    }
}

步骤 2：打包并部署

将每个应用单独打包并部署到指定目录。

单应用部署

步骤 1：配置 Nginx 虚拟主机

server {
    listen 80;
    server_name example.com;

    location / {
        root /path/to/app/dist;
        index index.html;
    }
}

步骤 2：打包并部署

将应用打包到根目录。

常见问题及解决方案

部分应用无法访问静态资源

原因：

Nginx 未正确配置静态资源路径。

解决方案：

在 Nginx 虚拟主机配置中，确保添加以下行：

location ~* \.(js|css|png|jpg|svg)$ {
    root /path/to/static/assets;
}

404 错误

原因：

应用未正确部署或 Nginx 配置不正确。

解决方案：

检查应用是否已部署到正确目录。
检查 Nginx 虚拟主机配置是否已正确映射到应用根目录。

跨域问题

原因：

部署在不同域名的应用之间存在跨域限制。

解决方案：

在 Nginx 虚拟主机配置中添加 CORS 头：

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';