Почему мое приложение MEVN показывает только бэкэнд при переходе на Heroku?

Question

В настоящее время мое приложение развернуто в режиме онлайн через Heroku, но оно отображает внутренний сервер, а не мое приложение Vue.

Примечание. В приложении есть оператор if. js, который обслуживает только файлы в производстве. Я удалил оператор if, чтобы увидеть, появится ли приложение без условий окружающей среды. Это не сработало.

Также у меня есть уменьшенная папка Vue js, называемая dist в моем каталоге express.

Обновлено

Метод heroku, который я использую, - это Heroku Git Cli

$ cd my-project/
$ git init
$ heroku git:remote -a testingew

$ git add .
$ git commit -am "make it better"
$ git push heroku master

Это то, что я вижу, что является ответом бэкенда на маршрут "/". Код находится в приложении. js

приложение. js Полный код

const serveStatic = require("serve-static");
const path = require("path");
const express = require("express");
const app = express();
const userRoutes = require("./routes/user");
const budgetRoutes = require("./routes/budget");
const profileRoutes = require("./routes/profile");
require("dotenv/config");
const port = process.env.PORT || 3000;
const cors = require("cors");
const morgan = require("morgan");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const cookieParser = require("cookie-parser");
const sessions = require("express-session");
const MongoStore = require("connect-mongo")(sessions);
const passport = require("passport");
const passportSetup = require("./config/passport.js");

//Log when making request
app.use(morgan("combined"));

//Parse body for post request
app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

var corsOption = {
  origin: true,
  methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
  credentials: true
};

app.use(cors(corsOption));

app.use(
  sessions({
    secret: process.env.SESSION_COOKIEKEY,
    saveUninitialized: false,
    resave: false,
    store: new MongoStore({
      mongooseConnection: mongoose.connection
    }),
    cookie: {
      // secure: true,
      maxAge: 86400000
    }
  })
);

//Initialize passport
app.use(passport.initialize());
app.use(passport.session());

//Automatic route placer
app.use("/auth", userRoutes);
app.use("/api/budget", budgetRoutes);
app.use("/api/profile", profileRoutes);
app.get("/", (req, res) => {
  res.send("App is on");
});

//404 error and pas to error handler
app.use((req, res, next) => {
  const error = new Error("An error has occured");
  error.status = 404;
  next(error);
});

//Error handler
app.use((error, req, res, next) => {
  //Respond Client
  res.status(error.status || 500);
  res.json({
    error: {
      message: error.message
    }
  });
  console.log(error.message);
});

//Mongo connection
mongoose.connect(
  process.env.DB_CONNECTION,
  {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useFindAndModify: false
  },
  () => console.log("connected to mongo atlas")
);

//Handle production
app.use(express.static(path.join(__dirname, "dist")));

// Redirect all requests to `index.html`
app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "dist", "index.html"));
});
//Start app
app.listen(port, () => {
  console.log(`Server is on port ${port}`);
});

Vue Маршрутизатор

Примечание. Я также использую средства защиты маршрута в компонентах, если это что-то значит

import Vue from "vue";
import VueRouter from "vue-router";

//import axios from "axios";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "login",
    // 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: () =>
      import(/* webpackChunkName: "about" */ "../views/Login.vue")
  },
  {
    path: "/userprofile",
    name: "userProfile",
    component: () => import("../views/userProfile.vue"),
    meta: {
      requireAuth: true
    }
  },
  {
    path: "/budgetform",
    name: "form",
    component: () => import("../views/budgetForm.vue"),
    meta: {
      requireAuth: true
    }
  },
  {
    path: "/mybudget",
    name: "myBudget",
    component: () => import("../views/myBudget.vue"),
    meta: {
      requireAuth: true
    }
  }
];

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

export default router;

Каталог файлов Express

Надеюсь, это поможет

Answer 1

РЕДАКТИРОВАТЬ

На основании ваших правок, отображающих ваше приложение Express, вам нужно удалить все между

app.use("/api/profile", profileRoutes);

и Mongo. Приложение не может работать, если вместо этого вы выполняете другие действия на маршруте. «Приложение включено», а проверка на наличие ошибок блокирует ваше приложение. Я не думаю, что вы хотите запустить ошибку на каждом маршруте, но это то, что происходит. Я бы посоветовал просмотреть некоторые Express учебники и начать с нуля, чтобы понять, почему это не сработает.

ORIGINAL

Попробуйте заменить все, что выше app.listen, на:

// Serve static assets
app.use(express.static(path.join(__dirname, 'dist')));

// Redirect all requests to `index.html`
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
})

Ваше подстановочное совпадение было неверным и будет соответствовать только путям к файлам, которые начинаются с точки, path.join не использовался правильно, не должно быть литералов sla sh. Я изменил другой синтаксис тоже. Если это не решит проблему полностью, существует много возможностей для ошибки, которые выходят за рамки этого вопроса:

1) структура каталогов 2) .gitignore 3) vue -router 4) пакет. json start скрипт