本地运行的vue2项目，使用内网穿透，前端界面一直转圈圈

Question

本地运行的vue2项目，使用内网穿透，前端界面一直转圈圈

内网穿透地址

项目配置

是前端资源没加载成功吗？

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

您想要解决的问题： 您遇到的问题是本地运行的Vue2项目在使用内网穿透时，前端界面一直显示加载中，即界面上的元素（如图片、脚本等）没有成功加载，导致页面无法正常显示。

图片内容：

1. 第一张图片显示了浏览器的控制台(Console)和网络(Network)标签页，其中网络标签页中有几个请求显示了错误，如ERR_CONNECTION_LENGTH_MISMATCH。
2. 第二张图片提供了更多网络请求的细节，包括请求URL、状态码、响应头等，其中也出现了ERR_CONTENT_LENGTH_MISMATCH错误。
3. 第三张图片展示了内网穿透的Dashboard界面，显示了隧道名称、公网地址、本地地址等信息。
4. 第四张图片是webpack-dev-server的配置文件，包含了host、port、proxy等配置信息。

问题出现原因： 根据您提供的图片和描述，问题可能出现在以下几个方面：

• 资源加载错误：网络请求显示了ERR_CONTENT_LENGTH_MISMATCH，这通常意味着请求的资源大小与服务器预期的不一致，可能是由于资源文件损坏或请求过程中被截断。
• 内网穿透配置：内网穿透的配置可能存在问题，导致前端资源无法通过公网地址正确访问。
• webpack-dev-server配置：代理(proxy)配置可能有误，导致前端资源请求被错误地转发。

问题解决方案：

1. 检查资源文件：确保项目中的静态资源文件（如JavaScript、CSS、图片等）是完整且未损坏的。
2. 检查内网穿透设置：确认内网穿透工具的设置是否正确，特别是本地地址和端口号是否与您的项目设置相匹配。
3. 调整webpack-dev-server配置：
   • 确保host设置为0.0.0.0，允许所有网络接口的访问。
   • 检查port是否与内网穿透的端口一致。
   • 确认proxy配置中的target地址是否正确，并且changeorigin和pathRewrite设置是否适用于您的项目。

提供代码： 由于您没有提供具体的代码段，以下是基于您提供的webpack-dev-server配置的示例修改：

devServer: {
  host: '0.0.0.0',
  port: 80,
  open: true,
  proxy: {
    [process.env.VUE_APP_BASE_API]: {
      target: 'http://127.0.0.1:8080',
      changeOrigin: true,
      pathRewrite: {
        ['^' + process.env.VUE_APP_BASE_API]: ''
      },
      disableHostCheck: true
    },
    [process.env.VUE_APP_BASE_SOCKET]: {
      target: 'http://106.14.139.90:8080',
      changeOrigin: true,
      ws: true,
      pathRewrite: {
        ['^' + process.env.VUE_APP_BASE_SOCKET]: ''
      },
      disableHostCheck: true
    }
  },
  // ... 其他配置
}

代码运行方式：

• 确保您的开发环境安装了Node.js和npm。
• 在项目根目录下运行npm install安装依赖。
• 运行npm run serve启动开发服务器。

代码预期运行结果：

• 如果配置正确，前端界面应该能够正常加载，不再出现转圈圈的情况。

推荐相关链接：

• Vue.js 官方文档
• webpack-dev-server 官方文档
• 内网穿透工具文档（假设您使用的是cpolar）

请注意，以上建议是基于您提供的信息。如果问题仍然存在，可能需要更详细的项目配置和错误日志来进一步诊断问题。