NodeJs - VueJs - 无法在生产中获取 /routes

Question

我想将使用 NodeJs (express) 和 VueJs (2.6.11) 开发的网站投入生产。

我的文件夹看起来像这样：

/MyNodeJsApp
     - MyVueJsApp

我的 vue.config.js 中有这个

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

所以当我npm run build 时，它会进入我项目根目录的公共目录。

我的 server.js 是这样的：

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

我的 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);
  };

这是我的 VueJsapp/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 前端工作正常。

但是当我尝试刷新页面时，我得到Cannot GET /pagename

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

Answer 1

根据documentation

使用历史模式时，URL 看起来“正常”，例如 http://oursite.com/user/id。漂亮！

不过，问题来了：因为我们的应用是单页客户端 端应用程序，如果没有适当的服务器配置，用户将获得 如果他们直接访问http://oursite.com/user/id，则会出现 404 错误 浏览器。现在这很难看。

不用担心：要解决此问题，您只需添加一个简单的 到您的服务器的全部后备路由。如果 URL 不匹配任何 静态资产，它应该提供与您的应用相同的 index.html 页面 住在里面。美丽，再次！

解决这个问题

对于 Node.js/Express，考虑使用connect-history-api-fallback middleware.

按照文档进行

安装插件

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'
});