在 Vue 2 App 中快速提供静态文件答案

【问题标题】：Express serve static files in Vue 2 App在 Vue 2 App 中快速提供静态文件
【发布时间】：2017-09-15 10:25:50
【问题描述】：

由于生产和开发结构不同，我在 vue 2 项目（webpack-simple 模板）中提供快速静态数据时遇到问题。

发展：本地主机/应用程序

生产：服务器/某些目录/应用程序

some-directory 经常更改，因此它是在配置文件中动态设置的。

我的 server.js 服务部分：

if (config.root !== '/') {
  app.use(`/${config.root}`, express.static(path.join(__dirname)));
}

app.use('/dist', express.static(path.join(__dirname, 'dist')));

转译后的 JS 文件在 /dist 文件夹中。

这是作为应用入口点的 index.html 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>App Demo</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

它在开发中有效，因为应用程序位于根目录中。

但在生产构建中它不起作用，因为应用程序是从服务器子文件夹提供的。

有什么办法解决这个问题吗？

谢谢。

【问题讨论】：

标签： node.js express vuejs2

【解决方案1】：

但在生产构建中它不起作用，因为应用程序是从服务器子文件夹提供的。

“它不起作用”这句话真的没有告诉我们什么。什么不起作用？您在客户端上遇到错误吗？服务器出错？你得到 404 的 HTML 吗？ HTML 很好，但图像 404？你没有具体说明哪里出了问题，所以我只能在这里给你一些一般性的建议。

如果您使用 Express 创建路由器：

const router = require('express').Router();
router.get('/a', ...);
router.get('/b', ...);
router.use('/c', express.static(...));

那么您将能够非常轻松地将整个应用程序放在任何子路径中：

app.use('/x', router);

/x 是您需要的前缀。

但您还需要确保您的所有静态资源（如 HTML 文件）不使用任何绝对路径 - 例如比如：

<a href="/a/b/c.html">...</a>
<script src="/a/b/c.js"></script>

但只有相对路径，例如：

<a href="b/c.html">...</a>
<script src="../../a/b/c.js"></script>

等等。如果您不理会您的应用程序并使用反向代理添加所需的路径前缀，这也是正确的——您也可以这样做，而不是弄乱您的 Node 代码，在这种情况下它可能更容易。有关 Node 应用的反向代理的更多信息，请参阅以下问题：

【讨论】：

它不起作用意味着它仍然从根 URL 获取数据，而不是提供的静态内容。我尝试了您的解决方案，但没有运气。由于这是 webpack 模板应用程序，我需要使用绝对路径，否则应用程序将无法找到已转译的资产。例如： src="../assets/logo.png" 将在构建后变为 src="/dist/logo.png" 。是否可以使用 node 或 express 将所有链接更改为具有前缀 /custom-directory/ ？

【解决方案2】：

假设你的 express js 服务器和你的 vue 应用在同一个文件夹中：

const express = require('express');
const path = require('path');

const hostname = 'localhost';
const port = 3000;

const app = express();
app.use(express.static(path.join(__dirname, 'dist')));

app.get('*', (req, res) => {
  res.sendFile(__dirname, '/dist/index.html');
});

app.listen(port, hostname, () => {
  console.log("Listening at http://%s:%s/", hostname, port);
});

别忘了先构建你的 Vue 应用程序！

【讨论】：

不只是发布您的代码，最好还包括关于您如何解决问题的说明
我的应用程序运行失败，我意识到错误在 res.sendFile(__dirname, '/dist/index.html');所以我把我的改成： res.sendFile(__dirname + '/dist/index.html');该函数需要一个完整的字符串到第一个参数中的索引文件