如何将我的Vue Express和Node SPA发送到Heroku，以便我的Vue路由器组件能够加载？

Question

我正在尝试部署一个VueJS节点全堆栈应用程序。当我在本地运行该应用程序时，但是当我将它部署到Heroku时，它只能加载我的"/“页面。其余的路由会给出404条未找到的消息。下面是我的Vue路由器和Express文件。

反应圆圈：

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;

节点与我使用连接历史-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
});