gpt4 book ai didi

node.js - 在 Vue 2 应用程序中快速提供静态文件

转载 作者:行者123 更新时间:2023-12-02 21:12:02 26 4
gpt4 key购买 nike

由于不同的生产和开发结构,我在 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 文件:

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

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

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

有什么想法可以解决这个问题吗?

谢谢。

最佳答案

假设您的 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 应用程序!

关于node.js - 在 Vue 2 应用程序中快速提供静态文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43491518/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com