Как создать одиночный JS-файл для VueJS - PullRequest
Новая
       51

Как создать одиночный JS-файл для VueJS

0 голосов
/ 07 ноября 2019

У меня есть проект в Vue, который будет большим, поэтому мы разделяем код на части с помощью конфигурации Webpack, но когда я собираю проект с vue-cli-service, он генерирует index.html, который предварительно выбирает / загружает всекуски. Я не хочу использовать это index.html. Мне нужен один входной файл для Vue, который запустит приложение и импортирует другие файлы по запросу.

Я попытался splitChunks: false в Webpack, но это не помогло: 

configureWebpack: {
   optimization: {
     splitChunks: false
   }
}

Попытался удалить другой импорт и сохранить только app.js, но это также не помогло.

Мы используем import(/* webpackChunkName: "login" */ './views/Login.vue'), но не во всех компонентах.

У меня ранее былдругой проект Vue, который работал так, как я хочу: только app.js и vendor.js, которые импортируют другие фрагменты по мере необходимости. Тогда я не использовал vue-cli-service;скорее просто простая конфигурация Webpack и System.import( /* webpackChunkName: "Login" */ '@/components/pages/login/Login.vue') во всех компонентах, которые импортируют файлы маршрута: 

<html>
...
    <body>
        <div id=app></div>
        <script type=text/javascript src=/static/js/vendor.2f58f4045cb046ff1dac.js>
        </script>
        <script type=text/javascript src=/static/js/app.877179012e83c1c97b77.js>
        </script>
    </body>
</html>

Я хотел бы построить свой проект и иметь один JS-файл, который я могу импортировать в другой HTML-файл,и он будет действовать как начальный файл.

Нужно ли мне System.import во всех операциях импорта? Любые другие конфигурации с vue-cli-service?

1 Ответ

1 голос
/ 07 ноября 2019

Сценарии предварительной загрузки и предварительной выборки, которые вставляются в index.html (@vue/preload-webpack-plugin), можно отключить с помощью chainWebpack, что дает только один импорт JavaScript app.jsв index.html: 

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.optimization.delete('splitChunks') // no vendor chunks
    config.plugins.delete('prefetch')         // no prefetch chunks
    config.plugins.delete('preload')          // no preload chunks
  }
}
...