0

Я пытаюсь разобраться во Vue SSR и вообще в node.js. У меня проблема с использованием import. В официальной документации мне не хватает подробностей.

До этого работал с vue-cli. Там вся структура строилась сама с помощью одной команды, а теперь мне приходится делать это самому, поэтому я испытываю трудности. В качестве сервера использую express

Допустим у меня есть 3 файла:

  1. main.js - точка входа во всё приложение, запускает сервер и обслуживает запросы
  2. app.js - содержит функцию, которая создаёт экземпляр Vue и возвращает его
  3. App.vue - шаблон для экземпляра Vue (думаю не особо важно какой тут код будет, главное импортировать этот шаблон в app.js)

main.js:

// createApp - функция которая создаёт экземпляр Vue
const createApp = require('./app')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()

server.get('*', (req, res) => {
    const context = { url: req.url }
    // Создать экземпляр Vue
    const app = createApp(context)

    renderer.renderToString(app, (err, html) => {
        if (err) {
            res.status(500).end('Внутренняя ошибка сервера')
            return
        }
        res.end('\
            <!DOCTYPE html> \
            <html lang="en"> \
                <meta charset="UTF-8"> \
                <head><title>Привет</title></head> \
                <body>' + html + '</body> \
            </html> \
        ')
    })
})

server.listen(8080)

app.js:

import Vue from 'vue'
import App from './App.vue'

// функция которая создаёт экземпляр Vue
export function createApp () {
    const app = new Vue({
        render: h => h(App)
    })
    return { app }
}

При попытке запустить всё это дело я получаю: SyntaxError: Cannot use import statement outside a module. Нагуглил, что для использования import я должен указать в package.json "type": "module", но тогда перестаёт работать require.

В документации они резко перестали показывать код для express, когда появился import. Это вводит в заблуждение и становится непонятно как я теперь должен всё это организовывать. Да, я понимаю, что там говорится про webpack, но из него нигде ничего не импортируется, я пробовал его устанавливать, это не помогает.

Что я должен сделать, чтобы это работало или как я должен изменить код?

1 ответ 1

0

Это было сложно, мне помогла разобраться вот эта статья.

В документации рассказали самые элементарные основы, а как это всё собрать вместе непонятно. То что показано в документации это просто цветочки, а в реальном проекте приходится иметь дело со сложными конфигурациями webpack, кучей незнакомых модулей, которые непонятно что делают, кучей ошибок, несовместимостей и сохранением Vue приложения в формате JSON. Последнее для меня стало просто сногшибательным открытием, кто и как смог до этого додуматься? Это же просто треш =)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.