Использование сборки модуля ES для приложения Vue.js

Я пытаюсь использовать сборку модуля es вместо WebPack для своего проекта vue.js. Моя цель - иметь отдельные модули JavaScript вместо одного файла (что делает webpack). На данный момент у меня есть следующие файлы:

index.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width,initial-scale=1.0">
            <script type="module" src="main.js"></script>
        </head>
        <body>
            <div id="app"></div>
        </body>
   </html>

main.js

    import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js'
    import App from './App.js'

    new Vue({
       render: function (h) {return h(App)},
    }).$mount('#app')

App.js

    export default {
        template: `<div id="app"><p>Hello World!</p></div>`,
    name: 'App'
    }

Сейчас он не работает, он продолжает показывать мне это сообщение:

Модуль не найден: ошибка: не удается разрешить https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js в C:\Users\userName\Desktop\ Примеры Vue \es-module-build-example\src'

Я не уверен, почему это не работает, поэтому приветствуется любая помощь:)

Источник

1 ответ

Импорт модуля из CDN невозможен. Просто удалите этот импорт и добавьте

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js"></script>

перед

<script type="module" src="main.js"></script>
Источник
Другие вопросы по тегам