如何将Vue Express和Node SPA存放到Heroku，以便加载Vue路由器组件

Question

我正在尝试部署VueJS Node全栈应用程序。当我在本地运行该应用程序时，它可以工作，但当我将其部署到Heroku时/"页面加载。其余的路由会显示404未找到消息。下面是我的Vue路由器和Express文件。

React Rounter:

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home.vue";
import { uriBase } from "../const";
import Services from "../components/Services.vue";
import MeetBrett from "../components/Brett.vue";

Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "home",
component: Home
},
{
path: "/Services",
name: "Services",

// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: Services
},
{
path: "/meetBrett",
name: "MeetBrett",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: MeetBrett
},
{
path: "/quote",
name: "Get Quote",
component: () =>
import(/* webpackChunkName: "about" */ "../components/GetQuotePage.vue")
}
];
const router = new VueRouter({
// base: '/dev', // for dev
mode: "history",
base: uriBase,
routes

});
export default router;

带有Express的节点我使用连接历史api回退

const express = require ("express");
const app = express();
const cors = require("cors");
const bodyParser = require("body-Parser");
const serveStatic = require("serve-static");
const path = require('path');
const history = require('connect-history-api-fallback');
require('dotenv').config("./process.env")
const port = process.env.PORT || 5000;
app.set(port)
const staticFileMiddleware = express.static(path.join(__dirname + "/public"));
app.use(express.json());
app.use(cors());
app.use(bodyParser());
// app.use(serveStatic(path.join(__dirname, '/public')));
// app.use(/.*/, (req, res) => express.static(path.join(__dirname, "/public")));
app.use(
history({
verbose: true,
index: 'index.html'
})
);
app.use(staticFileMiddleware);

app.listen(port, () => console.log(`Listening on port ${port}`));

Answer 1

使用connect-history-api-fallback中间件的正确方法是指定要重写的绝对路径。因此，如果您有index: 'index.html'，它应该是index: '/index.html'

这是默认的，所以你可能应该避免覆盖它

app.use(history({
verbose: true
}));
app.use(staticFileMiddleware);

---

一些额外的东西供你尝试。。。

在vue.config.js文件中设置前端应用程序的基本路径

module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/'
: '/dev/'
}

并在你的路由器中参考

const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});