Nginx 部署 Vue.js 应用时的 404 错误解决经历

原创已于 2024-10-22 08:14:13 修改 · 584 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #nginx #前端

于 2024-10-22 07:08:30 首次发布

Nginx 部署 Vue.js 应用时的 404 错误解决经历

在我最近的一个项目中，我遇到了一个让我抓狂的问题：使用 Nginx 部署的 Vue.js 应用，在访问某些路由时，刷新页面竟然出现了 404 错误。查找半天后，最终找到了解决方案。。。

问题分析

在使用 Vue Router 的单页应用中，一切正常，但是当我在浏览器中直接刷新页面，比如访问 https://chat.test.website/contact_groups，Nginx 就开始发愁了。它试图查找与 URL 对应的静态文件，但无论如何都找不到，于是返回了一个 404 错误。

解决方案

我开始查找如何配置 Nginx 来处理这种情况，经过一番搜索，终于找到了答案。以下是我所使用的 Nginx 配置：

Nginx 配置示例

在chat.test.website的Nginx 配置文件的server块下，添加如下内容：

    location ~* \.(ico|svg)$ {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;
    }
    
    location / {
    	add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
        expires -1; # 禁用缓存
        root /www/wwwroot/chat.test.website/public_html; # 修改为你的构建输出目录
        index index.html;
        try_files $uri $uri/ /index.html; # 处理 Vue Router 的重定向
    }

配置说明

try_files $uri $uri/ /index.html; 是关键！这个指令告诉 Nginx，首先尝试查找请求的文件，如果找不到，就转发到 index.html，这样 Vue Router 就可以接管路由了!

我还禁用了 HTML 文件的缓存，以确保用户每次访问都能获取到最新的内容。

对于其他静态资源，也配置了合理的缓存策略，这样可以加快页面加载速度。

应用配置

在修改配置后，需要重启 Nginx 以使其生效。使用以下命令：

sudo nginx -s reload

部署后，如何让用户刷新缓存

yarn build后，部署到服务器，如何让客户端强制刷新js等缓存呢？可以采用文件名版本控制的方式，

在 Vue 2 项目中，可以通过配置 Webpack 来实现文件名版本控制。以下是步骤：

修改 vue.config.js：在项目根目录下创建或修改 vue.config.js 文件，添加 filenameHashing 配置。

// vue.config.js
module.exports = {
  filenameHashing: true,
  chainWebpack: config => {
    config.output.filename = '[name].[contenthash].js'; // 设置 JS 文件名
    config.output.chunkFilename = '[name].[contenthash].js'; // 设置 chunk 文件名
  }
};

构建项目：运行 yarn build 或 npm run build，生成的构建文件将会包含哈希值的文件名。
检查构建输出：构建后，在 dist 文件夹中查看生成的文件名，确保它们包含了哈希值，如 app.abc123.js。

这样配置后，每次构建时，如果文件内容发生变化，生成的文件名也会相应变化，从而帮助浏览器获取最新版本。