Как визуализировать индексную страницу с помощью Vuejs, используя Node + Express

Я создаю небольшое приложение с Vuejs + Node, но в настоящее время мне нужно запустить 2 сервера в dev:

  • мой сервер узлов: nodemon server.js
  • и встроенный скрипт Vuejs: npm run dev, который запускает webpack-dev-server

Когда я пытаюсь развернуть, я не могу понять, как отображать страницу index.html с загруженным моим приложением vuejs.

На моем сервере я просто отправляю свой файл index.html:

app.use(express.static(__dirname + '/'));

Index.html загружается как пустая страница.

Я попытался запустить npm run build и получил следующее сообщение, но не могу понять, как оттуда инициировать мое приложение.

введите здесь описание изображения

Вот мой файл index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Startup app</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->

  </body>
</html>

Я знаю, что файл js со встроенным не вводится, но не знаю, как это сделать. Может ли кто-нибудь помочь?


person Daniel Falabella    schedule 14.02.2018    source источник
comment
Я столкнулся с проблемой. Вы смогли разобраться?   -  person Raja    schedule 05.07.2018


Ответы (2)


Попробуйте создать папку с именем public и поместите туда свой index.html. Затем подайте index.html следующим образом:

app.use(express.static('public'));
person Yamakenji    schedule 14.02.2018
comment
index.html отлично загружается с моим примером кода, но проблема в том, что я не могу понять, как внедрить файлы vuejs в prod (без запуска npm run dev) - person Daniel Falabella; 14.02.2018

Вы можете использовать ejs для рендеринга html-файла на сервере, просто создайте папку Views и создайте файл Home.ejs и npm i --save ejs, после чего потребуйте ejs на своем сервере и создайте запрос на получение для рендеринга этого файла на вашем сервере. Я столкнулся с этой проблемой.

app.set('view engine', 'ejs') 
app.get('/', function(req, res){ 
    res.render('Home')}) 
person Malek Wahmi    schedule 05.04.2021