在局域网中查看使用Django和webpack构建的网站

Question

11

我尝试在其他设备上查看我的本地站点，比如我的手机或另一台笔记本电脑。在我的当前笔记本上，该站点运行良好，我可以看到所有内容（前端），当我访问该站点时，我会收到200s的状态码。

然而，当我尝试使用我的iphone和第二台笔记本电脑访问该站点时，我没有看到任何前端内容，但是在尝试访问该站点时，我确实得到了200s的状态码。我的工作机器终端还告诉我有请求进来。

我使用Django作为后端，使用webpack打包/构建我的Javascript和CSS，并使用webpack-dev-server进行服务。

当我运行webpack时，我看到这个消息：

http://0.0.0.0:3000/
webpack result is served from http://localhost:3000/public/bundle/
content is served from ./public

当我在我的工作电脑上加载网页时，开发者工具会显示以下内容：

一切都正常运行。

我使用以下命令运行django：

$ ./manage.py runserver 0.0.0.0:8000

我的ifconfig显示：

inet 192.168.1.102

使用我的第二台笔记本电脑，我访问192.168.1.102:8000，但页面上没有任何内容。在我的机器上，我得到了一个工作站的200状态码，这意味着请求已经通过了。在我的第二个笔记本电脑上，我在开发者工具中看到了这个：

注意，在src和href中没有/public/。

在我的第二台机器上，如果我访问192.168.1.102:3000，我可以看到一个界面，并且我能够点击到192.168.1.102:3000/bundle/main.js，并查看我的webpack构建的JavaScript。

在我的第二台机器上，我尝试使用开发者工具将src和href更改为192.168.1.102:3000/bundle/main.js。然而，什么也没有改变，我仍然看到一个空白屏幕。

这是我的webpack配置的gist链接：

- Liondancer

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- furins · Accepted Answer

我认为您的页面是空的，因为整个“应用程序”是由JavaScript生成的(至少在您的两张截图中似乎是这样，假设<div id="app"></div>的内容不是由Django视图生成的)，但是JavaScript文件对于与您的开发机器不同的客户端是不可访问的。

没有看到您的settings.py, urls.py和生成主页的view的代码/模板，所以很难猜测发生了什么问题，但我们有一些可能导致此问题的候选方案：CORS、本地主机"毒化"和 STATIC_URL 配置错误。

解决方法（或提示）：

1. 从相同的端口提供捆绑包 (将它们添加到您的STATIC path). 2. 替换HTML URL 中所有的 "localhost" 引用 (这可能需要更改您的站点 - 参见站点框架). 3. 使用标准的模板标签/过滤器，避免在模板和代码中使用硬编码URL。