Question

（注意：这里有编码的总磨砂，所以如果我说些傻话，请理解。）

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

为了摆脱网址中的哈希值，该文档讨论了如何启用history mode。但是，在指定了之后，您必须配置服务器。引用;

[...]为您的服务器添加一个简单的全部后备路由。如果网址与任何静态资源都不匹配，则该网址应该与您的应用所在的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）已经为历史记录模式准备：当您开发您的应用时，无需编辑任何配置{ {1}}。

当您通过npm run dev 部署您的应用时，您必须应用文档中显示的服务器配置，这将创建一个npm run build文件夹，您可以自由地使用该文件夹上传到任何静态服务器（不一定是Node.js）。

示例代码是Node.js服务器的主要脚本，但它几乎是简单的，它返回/dist的内容（代码中也有一个“拼写错误”，应该是{ {1}}不index.html）任何请求，但会破坏CSS或JS等任何其他资产请求。它仅用于演示目的：使用.html响应任何路由（URL）。

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

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

1 个答案: