Javascript Vue和节点JS部署

我正在尝试制作我的第一个应用程序，前面使用Vue Js，后面使用Node

在我的计算机上，我创建了一个文件夹“project”，其中包含以下两个文件夹： . 客户端=>用于Vue Js前端 . Serveur=>用于带有节点JS的背面

在我的不同Vue和组件上，我调用不同的请求（参见下面的示例）

我知道，当我必须部署时，我必须为我的Vue JS创建一个“npm运行构建”。 所以我将这个构建导出到“/serveur/public”

但不幸的是，当我在本地测试我的应用程序时，我出现了以下错误： “vue router.esm.js:2051未捕获（承诺中）未定义”

当我在Heroku上部署它时，出现了以下错误： “选项网络：：错误连接被拒绝”

对于这个错误，我将localhost:3000更改为localhost:5000，但它仍然会发生

这是我的app.js：

    // CREATION DES DEPENDANCES DE MODULES
//MODULE DE JS.NODE
const https = require('https');
const fs = require('fs');
// var http = require("http");
const express = require('express');
const app = express();
const router = express.Router();
const cors = require("cors");
const mysql = require('mysql');
const bodyParser = require('body-parser');
const mysqlApostrophe = require("mysql-apostrophe");
//Module permettant de faire des refresh en SPA
const history = require('connect-history-api-fallback');

//IMPORT DES MODULES CREES
var dataBase = require('./routes/dataBase');

app.use(history());
app.use(cors());
// MISE EN PLACE DU BODY PARSER QUI PERMET DE LIRE LES JSON ET URL ENVOYE PAR LE FORMULAIRE
app.use(bodyParser.json()); // LIRE LES BODY ENCODES EN JSON
app.use(bodyParser.urlencoded({ // LIRE LES BODY ENCODES EN URL
    extended: true
}));

//Mise en place de express
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// MISE EN PLACE DE mysqlApostrophe
app.use(mysqlApostrophe); //PERMET D'INSERER DES CHAMPS CONTENANT DES APOSTROPHES


// RECUPERATION DES FICHIERS ROUTES DANS LE DOSSIER ROUTES
const creation = require("./routes/create");
const lecture = require("./routes/read");
const maj = require("./routes/update");
const suppression = require("./routes/delete")

// UTILISATION DES ROUTES
app.use("/create", creation);
app.use("/read", lecture);
app.use("/update", maj);
app.use("/delete", suppression)

//Gestion de la mise en production
if (process.env.NODE_ENV === 'production') {
    //Static folder
    app.use(express.static(__dirname + '/public/')).use
    //Handle SPA
    app.get(/.*/, (req, res) => res.sendFile(__dirname + '/public/index.html'));
} else {
    //Static folder
    app.use(express.static(__dirname + '/public/')).use
    //Handle SPA
    app.get(/.*/, (req, res) => res.sendFile(__dirname + '/public/index.html'));
}

// CHOIX DU PORT UTILISE PAR LE SERVEUR
const port = process.env.PORT || 3000; //RECUPERE UN PORT LIBRE SINON 3000
app.listen(port, function () {
    console.log("Le serveur utilise le port : " + port)
});

还有我的package.json

{
  "name": "projetweb",
  "version": "1.0.0",
  "engines": {
    "node": "10.16.3"
  },
  "description": "projet web gestion des appareils",
  "main": "app.js",
  "scripts": {
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Yassine Gharbi",
  "license": "ISC",
  "dependencies": {
    "babel-register": "^6.26.0",
    "bcrypt": "^3.0.6",
    "body-parser": "^1.19.0",
    "connect-history-api-fallback": "^1.6.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "morgan": "^1.9.1",
    "mysql": "^2.17.1",
    "mysql-apostrophe": "^1.0.8",
    "webpack-node-externals": "^1.7.2"
  }
}

有人能帮我解决这个问题吗

谢谢：）

/-------------------------------/

我找到了我出错的原因： “vue router.esm.js:2051未捕获（承诺中）未定义”

这是因为我在profil页面上使用了“beforeRouteEnter”方法。 但我不知道为什么它会这样

如果有人能帮我解决，请：）

---

您必须分别托管前端和后端部分此处有一些信息：@Justice47谢谢您的回答：）但现在我想在fastComet.com中托管它。我使用c-panel将前端放在公共html文件夹中，将后端（不带公共文件夹）放在服务器根目录中，但它仍然无法工作。你知道吗？

 beforeRouteEnter: (to, from, next) => {
    if (localStorage.length > 1) {
      let recupLocalStore = localStorage.getItem(`userInfoConnect`);
      recupLocalStore = JSON.parse(recupLocalStore);
      let id_utilisateur = recupLocalStore.id_user;
      if (id_utilisateur == 1 || id_utilisateur == 2 || id_utilisateur == 3) {
        next();
      } else {
        next("/login");
      }
    } else {
      next("/login");
    }
  },