сборка приводит к пустой HTML-странице с синтаксическими ошибками при обслуживании приложения Vue с помощью Node

Question

Я создал страницу VueJs с помощью CLI.Я хотел бы показать это другим людям без установленного Vue CLI или Node.Так же, как вы обычно открываете файлы .html в вашем браузере, я хотел бы открыть файл index.html после его создания.

Когда я открываю файл, я получаю пустую страницу с 404 сообщениями об ошибках в консоли.Я взял эти документы

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

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/ и получаю пустую страницу с двумя ошибками

Что мне не хватает?

Answer 1

Поскольку Vue - это только библиотека внешнего интерфейса, самый простой способ разместить ее и выполнить такие действия, как обслуживание ресурсов, - это создать простой дружественный к Express сценарий, который можно использовать для запуска мини-веб-сервера.Читайте быстро на Экспресс , если вы еще этого не сделали.После этого добавьте экспресс:

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

inдля генерации

Answer 2

Я бы попробовал это из корня вашего проекта.

npm install -g serve
serve -s dist

Если у вас возникла такая же проблема, возможно, вы изменили некоторую конфигурацию по умолчанию в вашем vue.json.

Насколько я могу судить, ваш код не работает, потому что вы обслуживаете каждый http-запрос index.html (именно поэтому вы видите <, что, скорее всего, <DOCTYPE...>. serve гораздо безопаснее, хорошо продуманный подход, если вы хотите построить его локально и посмотреть.