使用历史模式通过 Express.js 服务 VueJS 构建

Posted 2023-02-22

【中文标题】使用历史模式通过 Express.js 服务 VueJS 构建

【英文标题】：Serving VueJS Builds via Express.js using history mode

【发布时间】：2019-02-18 23:33:57

【问题描述】：

我想通过 express js 服务于 vue js dist/。我在 vue js 应用程序中使用历史路由器。

以下是api调用

api/ s-file/sending/:id terms/get/:which

正如我在 python here 中找到的解决方案一样。我不知道如何在带有express的node js中做到这一点

我现在使用的代码是

app.use(function (req, res, next) 
    if (/api/.test(req.url))
        next();
    else 
        var file = "";
        if (req.url.endsWith(".js")) 
            file = path.resolve(path.join(distPath, req.url))
            res.header("Content-Type", "application/javascript; charset=utf-8");
            res.status(200);
            res.send(fs.readFileSync(file).toString());
         else if (req.url.endsWith(".css")) 
            file = path.resolve(path.join(distPath, req.url))
            res.header("Content-Type", "text/css; charset=utf-8");
            res.status(200);
            res.send(fs.readFileSync(file).toString());

         else 
            file = path.resolve(path.join(distPath, "index.html"))
            res.header("Content-Type", "text/html; charset=utf-8");
            res.status(200);
            res.send(fs.readFileSync(file).toString());
        

    
)

【问题讨论】：

我不清楚你的要求，是 api/ 是一个 rest api 还是有任何静态文件目录等。？

所有提到的端点都是 REST API

【参考方案1】：

查看vue docs 中引用的connect-history-api-fallback。 这应该可以解决您的问题。

使用 connect-history-api-fallback 的示例

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

// Middleware for serving '/dist' directory
const staticFileMiddleware = express.static('dist');

// 1st call for unredirected requests 
app.use(staticFileMiddleware);

// Support history api
// this is the HTTP request path not the path on disk
app.use(history(
  index: '/index.html'
));

// 2nd call for redirected requests
app.use(staticFileMiddleware);

app.listen(3000, function () 
  console.log('Example app listening on port 3000!');
);

【讨论】：

它不适用于 vue routerlinks，即后备，而且我得到Cannot GET /

我的错，看看我更新的答案中connect-history-api-fallback的用法

错误：禁止您的客户端在部署到 docker 后无权从该服务器获取 URL /！这是什么意思？

@LOG_TAG 此错误可能在您的主机配置或服务器代码中有很多原因。考虑打开一个单独的问题，在其中提供所需的所有背景信息：（您要做什么？什么有效？什么无效？到目前为止您尝试了什么）

@Benno 肯定感谢您的回复，我正在使用通过 gcloud 运行的 google cloud 处理相同的“通过 Express.js 服务 VueJS 构建”！想知道它会重复一个 :)

【参考方案2】：

如果有人想使用的话，这个非常简单

只需在所有有效路线下方和app.listen上方添加即可

app.all("*", (_req, res) => 
  try 
    res.sendFile('/absolute/path/to/index.html');
   catch (error) 
    res.json( success: false, message: "Something went wrong" );
  
);

确保您已包含

app.use(express.static('/path/to/dist/directory'));

【讨论】：

为什么函数中没有使用“await”时会出现“async”？