如何为 VueJS 创建单项 JS 文件

Question

我在 Vue 中有一个很大的项目，所以我们使用 Webpack 配置将代码分成块，但是当我使用 vue-cli-service 构建项目时，它会生成一个 index.html 即 prefetches/preloads 所有块。我不想使用这个 index.html。我需要一个 Vue 入口文件，它将启动应用程序并按要求导入其他文件。

我在 Webpack 中尝试 splitChunks: false，但没有帮助：

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 的任何其他配置？

Answer 1

插入 index.html 的预加载和预取脚本（通过 @vue/preload-webpack-plugin) can be disabled via chainWebpack，在 index.html 中只产生 app.js 的一个 JavaScript 导入：

// 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
  }
}

如何为 VueJS 创建单项 JS 文件

How to create a Single Entry JS File for VueJS

javascript

webpack

vue.js

vuejs2

vue-cli