conf配置文件修改后Nginx跨网络依然无法访问或者无法渲染页面的解决方案

原创已于 2025-03-11 16:37:01 修改 · 708 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #运维 #前端 #vue

于 2025-03-06 13:54:33 首次发布

Java开发学习专栏收录该内容

21 篇文章

订阅专栏

场景一：无法访问此网站

在完成 Nginx 配置后，尝试通过局域网或公网访问 Nginx 服务时，却遇到了“无法访问此网站”的错误。尽管已经按照文档仔细配置了 Nginx 的配置文件，问题依然存在。这可能是由于防火墙未开放端口，导致 Nginx 配置文件中监听的端口（例如 9595）被服务器的防火墙阻止。

解决方法

1. 检查防火墙规则，确保目标端口已开放

首先，检查服务器的防火墙规则，确认目标端口是否已开放。可以通过以下命令查看当前的防火墙规则：

sudo iptables -nL

如果输出中包含类似以下的信息，说明端口已开放：

ACCEPT     tcp  --  0.0.0.0/0            0.0.0.0/0            tcp dpt:9696

2. 使用 UFW 防火墙开放端口

如果上述命令的输出中没有目标端口的信息，可以通过 UFW 防火墙开放端口。运行以下命令开放 9696 端口：

sudo ufw allow 9696/tcp

3. 检查 Nginx 绑定的 IP 地址和端口

如果防火墙规则正确，但问题仍未解决，可能是 Nginx 未绑定到正确的 IP 地址，导致外部设备无法访问。可以通过以下命令检查 Nginx 的监听状态：

ss -naltp

确保 Nginx 配置文件中的 listen 指令绑定了正确的 IP 地址和端口。例如：

listen 192.168.1.100:9696;

场景二：无法渲染页面

在 Vue 项目生成静态文件（dist 目录）并部署到服务器后，通过第二台电脑跨网络访问时，页面没有出现“无法访问此网站”的错误，但页面内容无法正常渲染。打开浏览器的开发者工具（F12），在控制台中发现了以下报错信息：

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html".

解决方法

在项目配置文件vite.config.ts中注释掉 base 配置项：

export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV } = env
  return {
    // base: VITE_APP_ENV === 'production' ? './' : './',
  }
})