Как подключить Vue без npm?

Question

Vue нужен на проекте который изначально написан на PHP. Очень изолированно нужен в одном месте для чата. Пытаюсь подключить:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="module" src="/js/chat/main.js"></script>

И в main.js

import Chat from './Chat'

new Vue({
    el: '#chat',
    template: '<chat/>',
    components: {Chat},
})

Так выдает 404 на import Chat from './Chat'. Если же добавить расширение import Chat from './Chat.vue' то пишет ошибку:

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

Answer 1

Подключите в Head а скрипт с vue в той части сайта где требуется

<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 src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <title>Document</title>
</head>

Answer 2

Насчет импорта. Он обязателен? Насколько я знаю, поддержка модулей в браузере далеко не полная.

Далее, вы подключаете обычную js версию Vue, не модульную.

Установите модульную версию как указано в документации, это должно сработать. https://vuejs.org/v2/guide/installation.html#CDN

<script type="module">
  import Vue from  'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'
</script>

Вроде бы напрямую без компиляции SFC использовать нельзя, это же не js. Этот ответ вам должен помочь https://stackoverflow.com/q/43896319/9047572

БЛОГ НА HUSL

Как подключить Vue без npm?

Ответы (2 шт):