表達js空白根頁面

Question

我有簡單的vue js應用程序和下一個快速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文件夾中。 但是我的快速js文件位於/

運行它后，我在localhost：1111上看到空白頁，實際上它從/檢索index.html，但是，我在localhost：1111 / dist上看到我的應用程序，並且從/ dist檢索index.html。

我的目的是在訪問localhost：1111時從/ dist接收index.html。

我試圖將express config更改為app.use（express.static（'./ dist'）） ，與此類似。 但這只會破壞任何東西（我無法在localhost：1111 / dist和localhost：1111 /上訪問我的應用程序）

總的來說，我有下一個項目結構

/ -> express js config在這里，基本index.html在這里

/ dist- >構建結果位於此處（index.html +靜態文件）

/ dist / static- >靜態文件在這里

/ build-> webpack配置在這里

Answer 1

為什么app.use(express.static('dist')); 不起作用的是，在index.html中，我已經鏈接到其他文件，例如/dist/static/..如果我的根文件夾是dist，那是不正確的。 因此，盡管主持人設置了webpack與此無關，解決方案是更改生產的webpack配置，以使構建腳本生成指向/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'));

有關更多信息，請檢查快速文檔。 看這里