vue打包部署后出现代理失效，网站刷新404，vue项目打包 - 编程导航

Bug 描述

vue项目打包部署后，出现代理失效，访问路径404问题

前端 user.z7z.me 后端 user-backend.z7z.me

问题出在前端，后端正常

问题1：代理失效

前端vue是通过代理解决跨域的在生产环境中访问user.z7z.me/api/user/current 会转发到user-backend.z7z.me/user/current 在开发环境中访问loaclhost:3000/api/user/current 会转发到user-backend.z7z.me/user/current 开发环境中转发正常，生产环境中出现问题，无法返回数据开发环境生产环境环境区分代理转发配置

问题2：路径404

在生产环境中直接访问网站路径会出现404错误

期望结果

解决代理问题，和访问路径404问题

问题所在及解决思路

问题1

在 Vue 项目中，vue.config.js 中设置的代理仅在开发环境中有效，用于解决开发过程中的跨域问题。当项目打包并部署到生产环境后，这些代理配置将不再生效。

生产环境的解决方案

在生产环境中，通常需要通过服务器配置（如 Nginx 或 Apache）来实现代理功能。

以下是通过 Nginx 和 Apache 实现代理功能的常见配置示例： Nginx 的代理配置假设你的前端项目部署在 /usr/share/nginx/html 目录下，后端 API 服务运行在 http://localhost:3000 ，以下是一个典型的 Nginx 配置文件示例：

▼
text
复制代码
server {
    listen 80;  # 监听 80 端口
    server_name example.com;  # 替换为你的域名

    # 静态资源路径
    root /usr/share/nginx/html;

    # 前端路由处理
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 代理到后端 API
    location /api/ {
        proxy_pass http://localhost:3000/;  # 后端服务地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # SSL 配置（如果需要）
    listen 443 ssl;
    ssl_certificate /path/to/your/certificate.pem;
    ssl_certificate_key /path/to/your/private.key;
}

Apache 的代理配置 Apache 也可以通过 mod_proxy 模块实现类似的代理功能。以下是一个示例配置：

▼
text
复制代码
<VirtualHost *:80>
    ServerName example.com  # 替换为你的域名

    # 静态资源路径
    DocumentRoot "/var/www/html"
    <Directory "/var/www/html">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    # 前端路由处理
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]

    # 代理到后端 API
    ProxyPass "/api" "http://localhost:3000/"
    ProxyPassReverse "/api" "http://localhost:3000/"
</VirtualHost>

# SSL 配置（如果需要）
<VirtualHost *:443>
    ServerName example.com
    DocumentRoot "/var/www/html"
    <Directory "/var/www/html">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    # SSL 配置
    SSLEngine on
    SSLCertificateFile /path/to/your/certificate.pem
    SSLCertificateKeyFile /path/to/your/private.key
</VirtualHost>

问题2 路由的hash和history模式的区别

首先hash模式url带#号，history不带#号 hash模式前端路由修改的是hash值(#及以后)，对后端没影响，因此改变hash也不会重新加载页面，比如修改为了不存在的#123页面，页面不会跳转; history模型刚好相反，没有对应的页面就会出现404

打包路由选择

前端测试用 hash 模式项目上线不想要url带#号的话使用history模式，不过使用history模式需要与后端沟通，需后端配置

生产环境的解决方案

1.在 Vue Router 的配置中，将 mode 设置为 hash 2.使用 history 模式时，后端需要配置反向代理，以确保所有前端路由都能正确返回 index.html 文件。这样，当用户直接访问某个路由（如 /about）时，服务器会返回 index.html，而不是返回 404 错误。

以下是几种常见的服务器配置示例：在 Nginx 配置文件中，添加以下内容：

▼
text
复制代码
location / {
    try_files $uri $uri/ /index.html;
}

Apache 在 .htaccess 文件中，添加以下内容：

▼
text
复制代码
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Node.js (Express) 如果你使用的是 Express 框架，可以在后端代码中添加以下路由：

▼
text
复制代码
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解决方法

通过配置Nginx解决前端Nginx配置

▼
text
复制代码
   server {
    	listen 80;
        server_name user.z7z.me;  #此处改为前端地址

        #此处用于解决代理问题
        location /api {
            proxy_pass http://user-backend.z7z.me;  #此处改为后端地址
            proxy_set_header Host $proxy_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_buffering off;
            proxy_set_header Connection "";
        }	 	

        #此处用于解决路径404问题
        location / {
            root www/wwwroot/user.z7z.me; #此处改为服务器上前端文件路径
            index index.html;
            try_files $uri $uri/ /index.html;
        }

    }

后端Nginx配置

▼
text
复制代码
    server {
        listen 80;
        server_name user-backend.z7z.me; #此处改为后端地址
        
        #CORS 配置
        location ^~ /api/ {
        # 禁止非 GET|POST|HEAD|OPTIONS|PUT|PATCH|DELET 的请求
        if ( $request_method !~ ^(GET|POST|HEAD|OPTIONS|PUT|PATCH|DELETE)$ ) {
            return 444;
        }

        set $origin $http_origin;
        # 重点！比如：
        # $origin !~ '^http?://user\.z7z\.me$
        # 下面配置前端域名，比如 user.z7z.me
        if ($origin !~ '^http?://user\.z7z\.me$') {
            set $origin 'http://user.z7z.me';
        }

        if ($request_method = 'OPTIONS') {

            add_header 'Access-Control-Allow-Origin' "$origin" always;
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always;
            add_header 'Access-Control-Allow-Headers' 'Content-Type, Accept, Authorization' always;
            add_header 'Access-Control-Allow-Credentials' 'true' always;

            add_header Access-Control-Max-Age 1728000;
            add_header Content-Type 'text/plain charset=UTF-8';
            add_header Content-Length 0;
            return 204;
        }
        
        if ($request_method ~ '(GET|POST|PATCH|PUT|DELETE)') {
            add_header Access-Control-Allow-Origin "$origin" always;
            add_header Access-Control-Allow-Methods 'GET, POST, PATCH, PUT, DELETE, OPTIONS' always;
            add_header Access-Control-Allow-Headers 'Content-Type, Accept, Authorization' always;
            add_header Access-Control-Allow-Credentials true always;
        }
        #代理到后端服务
        proxy_pass http://localhost:8080/; #此处改为后端要反向代理的真实地址
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr; 
        }
    }

致谢

感谢leikooo提供的Nginx解决方案

vue打包部署后出现代理失效，网站刷新404，vue项目打包部署路由问题，代理问题