production 和 express 中 workbox vuejs 的路由问题

Question

我正在创建一个论坛应用程序来了解 Express 中的 VueRouter。我想做的是在 vuejs 中创建一个路由，然后将其投入生产。当我编译时一切正常。视图文件直接进入 express 中的 public 文件夹，工作几乎完美。我可以完美地改变路线，但是当我从不同的路线触摸 CTRL + F5 到主要路线时，它 returns 一个 GET 错误。

例如这是我的索引并且工作完美：

我什至可以更改路线：

我按 F5 并重新加载页面没有任何问题，但是当我按 CTRL + F5 再次发出请求时，显然它 returns 是一个错误，因为我没有在 express 中声明的路线，

但 vuejs returns 只有一个 html 索引作为视图，我无法渲染任何其他文件，因为它们不存在。

图像中的这些public文件夹是vue通过构建命令创建的文件：

这是我的快速配置：

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersNotifications = require('./routes/notifications');
var usersNotifications = require('./routes/notifications');

var app = express();

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/notifications', usersNotifications);

module.exports = app;

这是我在 express 上的索引路线：

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index');
});

module.exports = router;

我唯一的选择是渲染 vuejs 提供的唯一索引。我该如何解决？

另一个问题是我不喜欢这些控制台工作箱消息，我怎样才能删除它们使它们永远不会出现：

这是 vuejs registerServiceWorkers.js 文件：

/* eslint-disable no-console */

import { register } from 'register-service-worker'

if (process.env.NODE_ENV === 'production') {
    register(`${process.env.BASE_URL}service-worker.js`, {
      /***
      * Note that here were some methods also display messages 
      * on the console and I deleted them. Methods like
      */
    })
}

有什么想法吗？

Answer 1

由于 vue 路由器正在处理页面路由，您必须为所有请求的路径呈现 index，例如：

router.get('*', function(req, res, next) {
    res.render('index');
});

// in server
app.use('*', indexRouter);

如果您要从服务器公开其他端点，则必须将其安装为最后一个路由中间件，例如，在您的情况下：

app.use('/notifications', usersNotifications);
app.use('*', indexRouter);

production 和 express 中 workbox vuejs 的路由问题

A routing problem with workbox vuejs in production and express

javascript

node.js

express

vuejs2

production-environment