Javascript NodeJs-VueJs-无法在生产中获取/路由

我想把我的网站在NodeJs（快速）和VueJs（2.6.11）开发的生产

我的文件夹如下所示：

/MyNodeJsApp
     - MyVueJsApp

const bodyParser = require("body-parser");
var cors = require('cors')

require('rootpath')();
const basicAuth = require('app/helpers/basic-auth');
const errorHandler = require('app/helpers/error-handler');
const app = express();

// parse requests of content-type: application/json
app.use(bodyParser.json());

app.use(express.static(__dirname + '/public'));

// parse requests of content-type: application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// Allow cors
app.use(cors())

// use basic HTTP auth to secure the api
app.use(basicAuth);

// global error handler
app.use(errorHandler);

// all Page routes
require("./app/routes/pageitem.routes.js")(app);
require("./app/routes/actualite.routes.js")(app);
require("./app/routes/user.routes.js")(app);
require("./app/routes/contact.routes.js")(app);

//We'll use the public directory to serve the Vue app
app.use(express.static('public'));

// set port, listen for requests
const port = 3000;
const server = app.listen(port, function () {
    console.log('Server listening on port ' + port);
});

我的vue.config.js中有这个

outputDir: path.resolve(__dirname, "../public")

因此，当我

npm运行build

时，它位于项目根目录下的公共目录中

我的server.js是这样的：

/MyNodeJsApp
     - MyVueJsApp

const bodyParser = require("body-parser");
var cors = require('cors')

require('rootpath')();
const basicAuth = require('app/helpers/basic-auth');
const errorHandler = require('app/helpers/error-handler');
const app = express();

// parse requests of content-type: application/json
app.use(bodyParser.json());

app.use(express.static(__dirname + '/public'));

// parse requests of content-type: application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }));

// Allow cors
app.use(cors())

// use basic HTTP auth to secure the api
app.use(basicAuth);

// global error handler
app.use(errorHandler);

// all Page routes
require("./app/routes/pageitem.routes.js")(app);
require("./app/routes/actualite.routes.js")(app);
require("./app/routes/user.routes.js")(app);
require("./app/routes/contact.routes.js")(app);

//We'll use the public directory to serve the Vue app
app.use(express.static('public'));

// set port, listen for requests
const port = 3000;
const server = app.listen(port, function () {
    console.log('Server listening on port ' + port);
});

my Nodejs api中的所有路由都包含相同的前缀

/api/

，如下所示：

module.exports = app => {
    const actualites = require("../controllers/actualite.controller.js");
  
    // Retrieve all Pages
    app.get("/api/actualites", actualites.findAll);

    app.get("/api/actualites/type", actualites.getAllType);

    app.get("/api/actualites/type/:type", actualites.findFromType);

    // Retrieve a single Page with customerId
    app.get("/api/actualites/:id", actualites.findOne);
  };

这是我的VueJSAP/router/index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Missions from '../views/Missions.vue'
import VousEtes from '../views/VousEtes.vue'
import VousEtesDesc from '../views/VousEtesDesc.vue'
import Actualite from '../views/Actualite.vue'
import Actualites from '../views/Actualites.vue'
import Service from '../views/Service.vue'
import Contact from '../components/Contact.vue'
import LoginPage from '../views/LoginPage.vue'
import Recrutement from '../views/Recrutement.vue'


Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    redirect: "/home"
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/missions',
    name: 'Missions',
    component: Missions
  },
  {
    path: '/recrutement',
    name: 'Recrutement',
    component: Recrutement
  },
  {
    path: '/vousEtes',
    name: 'VousEtes',
    component: VousEtes
  },
  {
    path: '/vousEtesDesc/:id',
    name: 'VousEtesDesc',
    component: VousEtesDesc,
    props(route) {
      return {
        pageid: route.params.id
      };
    },
  },
  {
    path: '/service',
    name: 'Service',
    component: Service
  },
  {
    path: '/actualites',
    name: 'Actualites',
    component: Actualites
  },
  {
    path: '/actualite/:id',
    name: 'Actualite',
    component: Actualite,
    props(route) {
      return {
        newsId: route.params.id
      };
    },
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  },
  {
    path: '/login',
    name: 'Login',
    component: LoginPage
  }
]

const router = new VueRouter({
  mode: 'history',
  scrollBehavior () {
    return { x: 0, y: 0 }
  },  
  routes
})

export default router

---

当我转到我的localhost:3000时，网站运行良好，我可以浏览网站，每个页面都正确加载了正确的数据。所以我的VueJs前端工作正常

但是当我尝试刷新页面时，我得到了

无法得到/pagename

我尝试了多种解决方案，更改了路由名称，更改了在我的server.js中导入它们的方式，我总是会遇到相同的错误。

根据

使用历史记录模式时，URL将看起来“正常”，例如。 . 漂亮

但问题来了：因为我们的应用程序是单页客户端 端应用程序，如果没有正确的服务器配置，用户将获得 404错误，如果他们直接访问 浏览器这太难看了

不用担心：要解决这个问题，只需添加一个简单的 捕获到服务器的所有回退路由。如果URL与任何 静态资产，它应该提供与应用程序相同的index.html页面 生活在。又漂亮了

要解决这个问题

JS/Excel，考虑使用

遵循文档

安装插件

npm install --save connect-history-api-fallback

导入库

var history = require('connect-history-api-fallback');

添加为中间件

var express = require('express');

var app = express();
app.use(history({
    index: '/home.html'
});