Question

我的应用程序在heroku上运行，并且路由向我发送JSON文件，但是我需要使用./server/public文件夹中的SPA作为index.html。当我打开heroku应用程序时，它会向我发送从“ /”路由发送的JSON文件，但是我需要它才能使用Vue SPA，因为如果出于某种原因，我在前端客户端中所做的操作，一条不存在的路由会通过前端客户端将我重定向到我的“ / forum”路由，但是其他任何不存在的路由都将不起作用，它将继续发送该路由的JSON。

app / server.js

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const expressValidator = require("express-validator");
const flash = require('connect-flash');
const mongoose = require('mongoose');
const cors = require("cors");
const config = require("./config/database");
if(process.env.NODE_ENV !== "production") require('dotenv').config();

mongoose.connect(config.database, { useNewUrlParser: true, useFindAndModify: false });

let db = mongoose.connection;

db.once("open", () => {
    console.log("Connected to MongoDB Atlas");
});

db.on("error", (err) => {
    console.log(err);
});

const app = express();

//Body-parser
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.use(cors());
app.use(expressValidator());
app.use(flash());
app.use(cors());

require("./passport")

//Routes
const home = require("./routes/home.js");
const forum = require('./routes/forum.js');
const ranking = require('./routes/ranking.js');
const profile = require('./routes/profile.js');

// Routing
app.use("/", home);
app.use("/forum", forum);
app.use("/profile", profile);
app.use("/ranking", ranking);

// Handle production build
if (process.env.NODE_ENV === "production") {
    app.use(express.static(__dirname + '/public/'));
    app.get(/.*/, (req, res) => { res.sendFile(__dirname + '/public/index.html') });
}

// PORT
const port = process.env.PORT || 3000;
app.listen(port, () => {
    console.log(`Server listening on port ${port}`)
});

Answer 1

如果要使用Vue和Express拆分前端和后端，则可能应该静态构建和托管Vue部件，然后让Express在Heroku上运行。

Here是有关如何部署Express应用程序的指南，然后您可以构建和部署静态Vue页面，here是用于部署Vue的文档。

heroku上的Vue + Express应用未在服务器/公用文件夹中使用SPA

1 个答案: