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

在计算机上，我创建了一个文件夹“ project”，其中包含以下2个文件夹： 。 Client => for Vue Js Front 。 Serveur =>与Node JS配合使用

My project

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

Request Call

我知道必须部署时，我必须为Vue JS进行“ npm run build”。 因此，我将此构建导出到“ / serveur / public”。

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

Error localhost:3000

当我在Heroku上部署它时，出现此错误： “选项http://localhost:3000/read/login net :: ERR_CONNECTION_REFUSED”

对于此错误，我将localhost：3000更改为localhost：5000和https://tranquil-tor-67272.herokuapp.com/，但仍会发生

Online error

这是我的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(/.*/,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未捕获（承诺）未定义”

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

如果有人可以帮助我，请解决它：）

 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");
    }
  },