我可以在为服务器提供 API 的同时提供静态文件吗？

Question

所以我对 web 开发还很陌生，现在我和我更面向 web 的朋友开始了一个项目，他把所有类型的框架都扔给我了。我们正在做 Vuejs、jade、stylus 和 jeet。对于新手来说，这当然很令人困惑，因为没有 Vuejs 示例使用 jade，没有 jade 示例使用 vuejs 等。

但是，对于这个项目，我们需要一个后端来处理 api 对 Google 地图的调用、保存内容等。我们都没有这方面的经验，我尝试在其中构建它Rust 并使其全部与 api 部分一起工作，但我无法设法提供文件，导致我们尝试使用 http 服务器提供文件，然后从 api 调用 Rust 后端客户端。这导致了问题，因为我们必须执行 CORS 请求（？），但我没有开始工作。

抱歉，背景很长，这一切都归结为一个问题：我如何提供静态文件，同时有可能对 Google 地图进行 api 调用并将内容存储在数据库中？我找到的所有示例似乎都假定您正在使用模板生成提供给最终用户的文件？

如何解决这个问题？我的朋友已经完成了前端的大部分工作，只需使用 npm 包即可工作 "http-server"

Answer 1

您可以在 Node.js

中使用 express 框架

它可以服务器 api 请求以及静态文件

静态文件可以使用express.static中间件作为服务器

您可以参考这个答案作为快速参考：

阅读此 link 以获取有关使用 express 创建 api 服务器的信息：http://expressjs.com/en/guide/routing.html

阅读此 link 以了解有关使用 express 提供静态文件的更多信息：http://expressjs.com/en/starter/static-files.html

Answer 2

重要部分在 app.js 文件中，确保你的服务器路由在顶部定义，然后客户端构建静态文件，如下所示。

var express = require('express');
var bodyParser = require('body-parser');
const path = require('path');

// put server express routes at the beginning //
var app = express();
var router = require('./routes')(); 
app.use('/api', router);
// put server express routes at the beginning //

//Serve the static files from the React app
app.use(express.static(path.join(__dirname, '/../build')));
// Handles any requests that don't match the ones above
app.get('*', (req,res) =>{
    console.log(res);
    res.sendFile(path.join(__dirname+'/../build/index.html'));
});

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var port = process.env.port || 3300

app.listen(port, () => {
    console.log("Hi This port is running");
});

app.get('/', function(req, res){
    if(req.session){
        console.log(req.session);
    }
    console.log('ok');

});

也在 package.json 文件中，

添加代理以路由它

"proxy": "http://localhost:3300",

我可以在为服务器提供 API 的同时提供静态文件吗？

Can I serve static files while providing an API for the server?

backend

node.js

web

vue.js