Мне нужен Vue для одного модального окна. Очень изолированно. Это не SPA. Я воспользовался Vue UI и создал проект в папке web. Но не знаю что надо подключить на странице чтобы заработало... Он компилирует релизную минифицированную версию в папку dist, хотя я запускаю команду serve
, а мне надо dev версию. Пытался подключать файл src/main.js, но опять получил ошибку main.js:1 Uncaught SyntaxError: Cannot use import statement outside a module
. Никак не могу понять какой файл мне подключать для отладочной версии...
1 ответ
Вам нужно собрать ваш проект в один файл и подключить его как любую другую стороннюю библиотеку.
Во Vue.js это делается или ручками или при помощи библиотеки vue-custom-element Делаете ваш main.js плюс-минус вот таким
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
import vueCustomElement from 'vue-custom-element'
Vue.use(vueCustomElement)
App.store = store
Vue.customElement('super-widget', App)
public/index.html меняете <div id="app"></div>
на <super-widget></super-widget>
И вот тут проверяете, как у вас дела - запускаете dev сборку. Все должно работать как работало. Если это так и есть, то это полный улёт!
Осталось сделать так, чтобы в продакшн сборке у вас был один js + один css (если у вас есть стили конечно) файл. Для этого в vue.config.js вносим вот такой блок
chainWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
config.optimization.delete('splitChunks');
}
},
Все, запускаем сборку, получаем два файлика - поздравляю вы сделали свой первый виджет на vue.js.
Cannot use import
имеется ввиду вы пытаетесь вызватьrequire
в main.js, если да то вам нужно настроить babel для обращения через require. Так же в файле package.json есть информация о скриптах запуска приложения,npm run serve
и тд