Question

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

发展：本地主机/应用

生产：服务器/一些目录/应用

某些目录经常更改，因此它在配置文件中动态设置。

我服务于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文件，用作app入口点：

<!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>

它适用于开发，因为app是root。

但是在生产版本中，它不起作用，因为app是从服务器子文件夹提供的。

任何想法如何解决这个问题？

感谢。

Answer 1

假设您的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应用！

Answer 2

但是在生产版本中，它不起作用，因为app是从服务器子文件夹提供的。

短语＆＃34;它不起作用＆＃34;真的告诉我们什么。什么不起作用？你在客户端遇到一些错误吗？服务器出错？你得到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应用程序的反向代理的更多信息，请参阅以下问题：

Express在Vue 2 App中提供静态文件

2 个答案: