[vite+vue3]线上部署报错net::ERR_ABORTED 404 (Not Found)

Question

本地文件路径没问题，线上get无法获取本地main.js文件

web端报错如下

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

### 问题描述 您在本地环境中运行正常的 `main.js` 文件，在将其部署到线上环境后，却无法通过 GET 请求获取到该文件。根据您提供的图片，可能的错误信息及上传后的现象需要更进一步的分析和解决方案。

可能的原因

1. 文件路径问题：
   • 在本地环境中，您可能直接使用了相对路径或绝对路径。但在生产环境中，路径可能会有所不同。
   • 确保线上环境中的 main.js 文件路径与您在代码中使用的路径一致。
2. 服务器配置问题：
   • 在生产环境中，服务器的配置可能会限制某些文件的访问。比如，某些服务器可能禁用了 .js 文件的访问。
   • 检查您的 Web 服务器（如 Nginx、Apache 等）的配置，确保没有相关的限制。
3. 跨域请求问题：
   • 如果尝试从不同的域名加载 main.js 文件，可能会遭遇跨域请求限制。
   • 确保您的服务器允许跨域访问，或在同一域名下访问该文件。
4. 网络问题：
   • 检查网络连接，确保线上服务器能够正常提供服务并可访问到相应的资源。

解决方案

1. 检查文件路径： 确保 main.js 的路径正确。在代码中使用绝对路径或相对于网站根目录的路径。例如：

   <script src="/assets/js/main.js"></script>
   

   确保将 main.js 文件放在对应的 /assets/js/ 目录下。

2. 服务器配置调整： 对于 Nginx，添加以下内容以确保可以访问 .js 文件：

   location / {
      try_files $uri $uri/ =404;
   }
   

3. 设置 CORS： 如果需跨域访问，您需要在服务器响应中添加 CORS 相关的 HTTP 头信息，例如：

   Access-Control-Allow-Origin: *
   

4. 调试网络请求： 使用浏览器的开发者工具检查网络请求，查看请求是否成功，返回的状态码是什么。一个常见的错误可能是 404（未找到文件）或 403（禁止访问）。

示例代码

假设您的服务器是一个使用 Node.js 和 Express 的应用，您可以通过以下代码设置 CORS 和服务器静态文件路径：

const express = require('express');
const cors = require('cors');
const path = require('path');
const app = express();
// 使用 CORS
app.use(cors());
// 提供静态文件
app.use(express.static(path.join(__dirname, 'public'))); // 假设 main.js 在 public/js/ 路径下
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

总结

通过以上方法，您应该能够诊断并解决线上环境无法获取 main.js 文件的问题。请检查路径配置、服务器设置、跨域问题以及网络情况，确保 main.js 能够被成功加载。