0

我的应用程序目前通过 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的文件目录

文件目录截图

希望这会有所帮助

4

1 回答 1

1

编辑

根据显示您的 Express 应用程序的编辑，您需要删除之间的所有内容

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

和Mongo。如果您在路线上执行其他操作，该应用程序将无法运行。“应用程序已打开”和错误检查内容阻止了您的应用程序。我不认为你的意思是在每条路线上都运行错误，但这就是正在发生的事情。我建议浏览一些 Express 教程并从头开始尝试理解为什么它不起作用。

原来的

尝试将上面的所有内容替换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.jsonstart脚本

于 2020-02-16T10:35:20.320 回答