Узел только отправляет HTML-контент клиенту, а не отправляет целое приложение Vue - PullRequest
Новая
       100

Узел только отправляет HTML-контент клиенту, а не отправляет целое приложение Vue

2 голосов
/ 02 октября 2019

Я создал новый проект VUE с CLI и хочу развернуть его. На основании этой документации

https://router.vuejs.org/guide/essentials/history-mode.html#html5-history-mode

я добавил режим истории в маршрутизатор. После запуска npm run build я взял пример кода для статического собственного Node-сервера

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

const http = require('http')
const fs = require('fs')
const httpPort = 3000

http.createServer((req, res) => {
  fs.readFile('../base/index.html', 'utf-8', (err, content) => {
    if (err) {
      throw err;
    }

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

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

Так что при переходе к localhost:3000 проект vue, кажется, загружается правильно

enter image description here

но у меня есть пустая страница с двумя ошибками

enter image description here

КогдаЯ нажимаю на эти файлы JS, он показывает мне содержимое файла index.html. Очевидно, что JS не в состоянии понять этот HTML-контент. Как я могу решить эту проблему?

Ответы [ 2 ]

3 голосов
/ 02 октября 2019

Сервер не будет отправлять все приложение vue сразу.

  • Браузер получает html-файл с сервера, когда вы переходите по этому URL-адресу.
  • Браузер анализирует html-файл.
  • Браузер обнаруживает ресурсы (js, images, css).
  • Браузер запрашивает эти файлы.

Itзапросите эти файлы с сервера, но вы не инициализировали сервер, чтобы найти эти файлы.

Итак, нужно добавить статические файлы.

https://expressjs.com/en/starter/static-files.html

Вы можете взять ссылку с здесь

2 голосов
/ 02 октября 2019

, как @Sukul ответил ранее, вам просто нужно сервировать статические файлы, потому что теперь у вас есть только один обработчик для обработки всех запросов, поступающих с HTML-файлом (документ точки монтирования), и когда он запрашивает приложение * .js, этоожидая действительный синтаксис javascript, вместо этого он находит HTML, и что сообщения об ошибках находятся на вкладке сети 

const http = require('http')
const fs = require('fs')
const nStatic = require('node-static');
var fileServer = new nStatic.Server('./public');

const httpPort = 3000

const controllers = (req,res)=>{
  if(req.url.includes(".")
   return fileServer.serve(req, res);
  else
  fs.readFile('../base/index.html', 'utf-8', (err, content) => {
    if (err) {
      throw err;
    }

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

    res.end(content)
  })
}
}

http.createServer(controllers).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

узел-статический ref

однако я оченьрекомендуем вам попробовать использовать express.js

...