2

Мне нужен Vue для одного модального окна. Очень изолированно. Это не SPA. Я воспользовался Vue UI и создал проект в папке web. Но не знаю что надо подключить на странице чтобы заработало... Он компилирует релизную минифицированную версию в папку dist, хотя я запускаю команду serve, а мне надо dev версию. Пытался подключать файл src/main.js, но опять получил ошибку main.js:1 Uncaught SyntaxError: Cannot use import statement outside a module. Никак не могу понять какой файл мне подключать для отладочной версии...

1
  • Cannot use import имеется ввиду вы пытаетесь вызвать require в main.js, если да то вам нужно настроить babel для обращения через require. Так же в файле package.json есть информация о скриптах запуска приложения, npm run serve и тд 26 мар 2021 в 12:27

1 ответ 1

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.

Ваш ответ

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

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