使用 Node 提供 Vue 应用程序时，构建会导致空 HTML 页面出现语法错误

我使用 CLI 创建了一个 VueJs 页面。我想在没有安装 Vue CLI 或 Node 的情况下向其他人展示它。就像您通常在浏览器中打开 .html 文件一样，我想在构建后打开 index.html 文件。

当我打开该文件时，我在控制台中看到一个空白页面，其中包含 404 错误消息。我拿了这些文档

https://cli.vuejs.org/guide/deployment.html#general-guidelines https://cli.vuejs.org/guide/deployment.html#general-guidelines

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

并添加了mode: "history",到我的路由器对象。使用 Vue CLI 构建项目后，我设置了一个简单的 Node 服务器

const http = require('http');
const server = http.createServer();
const fs = require('fs');
const port = 3000;

server.on('request', async (req, res) => {
  const htmlContent = fs.readFileSync('./index.html', 'utf-8');

  res.writeHead(200, {
    'Content-Type': 'text/html; charset=utf-8'
  });

  res.end(htmlContent);
});

server.listen(port, err => {
  console.log(`server is listening on ${port}`)
})

运行服务器时我调用http://localhost:3000/并得到一个有两个错误的空白页面

我缺少什么？

由于 Vue 只是一个前端库，因此托管它并执行诸如提供资产之类的操作的最简单方法是创建一个简单的 Express 友好脚本，您可以使用它来启动迷你 Web 服务器。快速阅读Express https://expressjs.com/如果你还没有。之后，添加快递：

npm install express --save

现在添加一个server.js文件到项目的根目录：

// server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
var hostname = '127.0.0.1';

app.listen(port, hostname, () => {
   console.log(`Server running at http://${hostname}:${port}/`);
 });

之后你可以运行：

 node server

您的项目将在给定的主机和端口上提供服务

假设您已经拥有dist目录，如果你没有运行它：

npm run build

为了生成它