Question

我有带有下一个Express js配置文件的简单vue js应用程序

var express = require('express');
var http = require('http');

var app = express();
var server = http.createServer(app);
app.use(express.static('.'));
server.listen(1111);

生成结果位于 / dist 文件夹中。但是我的express js文件位于 /

运行它后，我在 localhost：1111 上看到空白页面，实际上它从 / 中检索index.html，但是，我在 localhost上看到了我的应用程序： 1111 / dist ，并从 / dist

中检索index.html

我的目的是在访问 localhost：1111 时从 / dist 接收index.html。

我尝试将express配置更改为 app.use（express.static（'./ dist'）），与此类似。但这只会破坏任何东西（我无法在 localhost：1111 / dist 和 localhost：1111 / 上访问我的应用）

总的来说，我有下一个项目结构

/ ->快速js配置在此处，基本index.html在此处

/ dist ->构建结果位于此处（index.html +静态文件）

/ dist / static ->静态文件在这里

/ build -> Webpack配置在此处

Answer 1

app.use(express.static('dist'));不起作用的问题是在index.html中，我链接到其他文件，例如/dist/static/..，如果我的根文件夹是 dist ，那是不正确的。因此，尽管主持人设置了webpack与此无关，但解决方案是更改生产的webpack配置，以使 build 脚本生成指向 /dist/index.html 类似于 / static /..，而不是 / dist / static /..

显然我不得不改变

app.use(express.static('.'));

到

app.use(express.static('dist'));

作为结论-检查生成的index.html并分析路径是否正确是有意义的。

Answer 2

有时此问题可能是由于该应用程序未从根文件夹进行服务器处理。例如， / home / user / path-to-the-project“ 该应用程序需要像这样运行。

因此，您需要在此处进行如下更改，

app.use(express.static(__dirname + '/dist'));

有关更多信息，请检查快速文档。 See here

表达js空白根页面

2 个答案: