用于提供 Vue.js html 文件的快速服务器

Question

我使用 CLI 编写了一个 Vue 应用程序。我已经运行了 build 命令并获得了带有 html 文件和相关 js/css 文件等的 dist 文件夹。现在我想用 node/express 服务器在 heroku 上托管应用程序，我写的只有一半。

为了记录，我使用 vue 路由器在不同的路由上渲染不同的组件。

const routes = [
  {path: "/", redirect: "/home"},
  {path: "/home", component: body},
  {path: "/home/new", component: create},
  {path: "/home/entry/:id", component: blog},
  {path: "/register", component: register},
  {path: "/logout", component: logout},
  {path: "/home/user/:userprofile", component: userprofile}

]

我的 vue 应用程序为其所有数据调用一个单独的后端 API，因此我请求的快速服务器只是为所有路由提供 html 文件。

这是我从谷歌找到的：

var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
var port = process.env.PORT || 5000;

app = express();

app.use(serveStatic(__dirname + "/dist"));

app.listen(port);

当我要去“/”路由时它可以工作，但是当我去“/home”或类似的时候它会返回一个错误“cannot GET /home”或类似的。

谁能给我写一个简短的快速服务器应用程序，用于在 Heroku 上部署 vue？

Answer 1

很可能您的网络服务器上缺少将所有请求重定向到“/”的配置。 VueJs 路由器在此之后负责，但它不会接收请求，除非您明确配置您的 Web 服务器来这样做。

Here 是一个 Vue Router 文档页面，其中包含用于不同 Web 服务器的短代码 sn-ps，您需要将其添加到 Web 服务器配置中。