Vue.js + Node.js:服务器配置在哪里

Question

(注意：这里用编码进行全面清理，所以如果我说一些愚蠢的话，请理解。

我用典型的 webpack 模板启动了一个 Vue.js 项目，用于制作单页应用程序。(我没有修改文档结构。上面没有其他框架。

为了摆脱 URL 中的哈希，该文档讨论了打开历史记录模式。但是，在指定后，必须配置服务器。引用;

[...]为您的服务器添加一个简单的包罗万象的回退路由。如果网址与任何静态资产都不匹配，则应提供与您的应用所在的同一索引.html网页。

由于我使用的是 Node.js + Vue.js上面没有添加任何其他内容，这应该是服务器配置的相应示例。

const http = require('http')
const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
}
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
})
res.end(content)
})
}).listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort)
})

但是，我一生都无法弄清楚这应该去哪里，因为它没有指定这样的内容。这是否进入主.js？路由器的索引.js？或者它是构建文件夹或配置中某个东西的一部分？(如果我在 heroku 上运行生产版本，会有什么区别吗？

Answer 1

webpack 模板附带一个已经为历史模式准备webpack-dev-server(基于 Node.js)：当您通过npm run dev开发应用程序时，无需编辑任何配置。

当您通过npm run build部署应用程序时，您必须应用文档中显示的服务器配置，这将创建一个/dist文件夹，您可以将内容自由上传到任何静态服务器(不一定是 Node.js)。

示例代码是 Node.js 服务器的主要脚本，但它几乎是裸露的，它将index.html的内容(代码中还有一个"拼写错误"，应该.html而不是.html)返回给任何请求，但这会破坏任何其他资产请求，如 CSS 或 JS。它仅用于演示目的：使用index.html响应任何路由 (URL)。

如果您计划部署到 Node.js 服务器，您应该寻找更好的脚本。