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

Question

（注意：这里的代码完全擦洗，所以如果我说的很傻，请理解。）

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

为了摆脱 URL 中的哈希，文档谈到了打开 history mode。但是，在指定之后，您必须配置服务器。引用;

[...] 为您的服务器添加一个简单的包罗万象的后备路由。如果 URL 不匹配任何静态资源，它应该提供与您的应用相同的 index.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)
})

但是，我终其一生都无法弄清楚这应该去哪里，因为它没有具体说明。这会进入 main.js 吗？路由器的 index.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 服务器中，您应该寻找更好的脚本。