如何从我的 node/express 服务器提供我的 Vuejs 前端文件？答案

【问题标题】：How can I serve my Vuejs front end files from my node/express server?如何从我的 node/express 服务器提供我的 Vuejs 前端文件？
【发布时间】：2018-03-03 16:59:49
【问题描述】：

基本上我有两条路线，一条用于主页，另一条用于管理页面，但我找不到关于如何结合 Vuejs 和 Express 的好文档，因此我可以同时提供两个页面，假设两者都有不同的 UI，因此组件的构造不同。

【问题讨论】：

它们是 2 个独立的 vue-cli 项目吗？路线是什么样的？你在历史模式下使用vue-router吗？
我没有使用vue-router（还没有，因为我的应用程序没有多个页面/组件要呈现）并且可能我必须制作2个单独的vue-cli项目，前提是我终于使用了 vue-cli webpack 模板。

标签： node.js express vue.js

【解决方案1】：

要使用 vue-router 并避免遇到 404 问题，您的 express.js 必须有一个为 index.html 提供服务的后备。这是一个vue 指导如何做到这一点https://router.vuejs.org/en/essentials/history-mode.html

【讨论】：

我很久以前就解决了这个问题：app.all('*', (req, res) => { res.redirect('/') }) 无论如何，谢谢。

【解决方案2】：

要使用expressjs 提供静态文件，您需要使用static middleware。

它接受目录名作为第一个参数。该目录应包含所有要提供的静态文件。

const express = require('express');
let app = express();
app.use(express.static('public')); // NAME OF THE DIRECTORY IS PUBLIC

const serverPort = 3000;

const respHttpOptions = {
    root: `public/`,
    dotfiles: 'deny',
    headers: {
        'dina-timestamp': Date.now(),
        'my-xxx-header': true
    }
};
app.get('/', (req, resp) => { // HANDLE THE REQUEST HERE
    resp.sendFile('index.html', respHttpOptions, (err) => {
        // SEND INDEX.HTML INSIDE PUBLIC DIRECTORY
        if (!err)
            console.log(sucL(`Served index.html`));
        else
            console.log(errL(`Failed to serve index.html ${err}`));
    })
});

try {
    app.listen(serverPort);
    console.log(sucL(`Server started at ${serverPort}`));
} catch (e) {
    console.log(errL(e));
}

vuejs 没有区别！静态目录中可以有多个目录。

【讨论】：

如果你在那里这样做：app.use(express.static('public'));这样做没有意义： app.get('/', (req, resp) => {... 因为当我运行服务器并默认在指定端口打开一个窗口时会发送 index.html 文件. 我知道我可以通过这种方式提供文件，但如果你使用的是 vuejs webpack 模板，它会在端口 8080 上使用不同的服务器，我不需要运行这个服务器，我需要在我的 express 本地服务器上运行。跨度>