為什么我的 MEVN 應用程序在部署到 Heroku 時只顯示后端？

Question

我的應用程序目前通過 Heroku 在線部署，但它顯示的是后端服務器而不是我的 Vue 應用程序。

注意：我在 app.js 中有一個 if 語句，它只在生產中提供文件。 我刪除了 if 語句以查看應用程序是否會在沒有環境條件的情況下出現。 這沒用。

另外，我的 express 目錄中有一個名為 dist 的縮小的 Vue js 文件夾。

更新

我使用的 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

這就是我看到的，這是對“/”路由的后端響應。 代碼在 app.js 中

app.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 教程並從頭開始嘗試理解為什么它不起作用。

原來的

嘗試將app.listen上面的所有內容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沒有正確使用，應該沒有斜線文字。 我也更改了一些其他語法。 如果這不能完全解決問題，則存在許多超出此問題范圍的錯誤可能性：

1) 目錄結構 2) .gitignore 3) vue-router 4) package.json start腳本