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

Question

I'm having an issue with express static data serving in vue 2 project (webpack-simple template) because of different production and development structure. 由于生产和开发结构不同，我在vue 2项目（webpack-simple模板）中表达静态数据时遇到问题。

development: localhost/app 开发：localhost / app

production: server/some-directory/app 生产：服务器/某些目录/应用

some-directory changes quite often so it is set dynamically in the config file. 一些目录经常更改，因此可以在配置文件中动态设置。

My serving part of server.js: 我的server.js服务部分：

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

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

Transpiled JS files are in /dist folder. 转译的JS文件位于/ dist文件夹中。

This is index.html file which serves as app entry point: 这是用作应用程序入口点的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>

It works in development because app is in root. 它在开发中有效，因为应用程序是根目录。

But in production build it doesn't work because app is served from server subfolder. 但是在生产版本中，它不起作用，因为应用程序是从服务器子文件夹提供的。

Any ideas how to solve this? 任何想法如何解决这个问题？

Thanks. 谢谢。

Answer 1

Assuming your express js server is in the same folder as your vue app: 假设您的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);
});

Don't forget to build your Vue app first! 不要忘记先构建您的Vue应用！

Answer 2

But in production build it doesn't work because app is served from server subfolder. 但是在生产版本中，它不起作用，因为应用程序是从服务器子文件夹提供的。

The phrase "it doesn't work" tells us nothing, really. “这没用”这句话真的没有告诉我们。 What doesn't work? 什么不起作用？ Do you get some error on the client? 您在客户端上得到一些错误吗？ Error on the server? 服务器错误？ Do you get 404 for HTML? 您是否获得404 for HTML？ HTML is fine but 404 for images? HTML很好，但图片404？ You didn't specify what's wrong so I can only give you some general advice here. 您没有指定出什么问题，所以我只能在这里给您一些一般性的建议。

If you create a router with Express: 如果使用Express创建路由器：

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

then you will be able to put your entire app in any sub-path very easily: 那么您就可以很容易地将整个应用程序放在任何子路径中：

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

where /x is your required prefix. /x是您所需的前缀。

But you also need to make sure that all of your static assets like HTML files don't use any absolute paths - eg things like: 但是，您还需要确保所有静态资产（例如HTML文件）均不使用任何绝对路径-例如：

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

but only relative paths like: 但只有相对路径，例如：

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

etc. This is also true if you leave your app alone and use a reverse proxy to add the required path prefix - which you could also do instead of messing with your Node code, and it may be easier in this case. 等等。如果您不理会应用程序并使用反向代理添加所需的路径前缀，这也是正确的-您也可以这样做而不是弄乱您的Node代码，在这种情况下可能会更容易。 For more info on reverse proxies with Node apps see those questions: 有关使用Node应用程序的反向代理的更多信息，请参阅以下问题：

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

问题描述

2 个解决方案

解决方案1
4 2018-12-13 03:40:45

解决方案2
0 已采纳 2017-04-19 09:42:24

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

问题描述

2 个解决方案

解决方案1 4 2018-12-13 03:40:45

解决方案2 0 已采纳 2017-04-19 09:42:24

解决方案1
4 2018-12-13 03:40:45

解决方案2
0 已采纳 2017-04-19 09:42:24