vue.js - 如何将多个与 Vue 捆绑在一起

问题描述

我已经用 vue-cli 3 启动了一个项目，我当前的目录树是：

/
  /dist
  /public
    index.html
    favicon.ico
  /src
    /assets
    /components
    /plugins

当我运行 vue-cli build 时，我将所有源代码捆绑到 /dist 下的 app.js 中。

我的目标是捆绑另一个包，比如从 /public 下的一些脚本或 /src 下的特殊目录中的 special-app.js。

我无法以任何方式使用tsconfig或尝试通过vueconfig.js.

如何捆绑说 /src/special/a.ts 和 /src/special/b.ts -> /dist/special.js？

更新#1

我已经尝试过@digitaldrifter 提出的解决方案

config.entryPoints.delete('app');

config
  .entry('app')
    .add(path.resolve(__dirname, './src/widget/main.ts'))
    .end()

config.entry('runner')
    .add(path.resolve(__dirname, './src/donr/donr.ts'))
    .add(path.resolve(__dirname, './src/donr/donr.scss'))
    .end();

结果是最后没有 runner.js 或 runner.html

更新#2

我正确构建它的唯一方法是使用pages https://cli.vuejs.org/config/#pages

pages: {
  widget: {
    entry: 'src/widget/main.ts',
    template: 'public/index.html',
    filename: 'index.html'
  },
  donr: {
    entry: 'src/runner/donr.ts',
    template: 'public/donr.html',
    filename: 'donr.html'
  }
}

明智地建造这行得通！我有：

File              Size                         Gzipped

dist/widget.js    4723.88 kb                   841.16 kb
dist/app.js       4723.88 kb                   841.16 kb
dist/donr.js      236.48 kb                    56.84 kb
dist/test.js      191.93 kb                    42.07 kb

当我这样做时vue-cli serve的问题donr.js是作为 HTML 提供的......而当我在donr.js下面构建时/dist是所有带有 webpack 标头的 JS 和所有这些好东西。我不明白为什么，也不明白如何查看 dev-server 正在服务的文件，它是从我身上抽象出来的......有什么想法可以解决这个问题吗？

更新#3 强制开发服务器将编译后的文件转储到磁盘。我什至看不到donr.js，而我刚构建时确实看到了。我慢慢意识到 dev-server 在某处有错误....

有问题的 Github URL： https ://github.com/amoldavsky/vue-multi-bundle/tree/master

运行 npm 服务 VS npm 构建

有任何想法吗？

标签： vue.jswebpackvuejs2vue-clivue-cli-3

chainWebpack: config => { // first clear the default app entry point config.entryPoints .delete('app') // add a new entry with the necessary files config.entry('special') .add('/src/special/a.ts') .add('/src/special/b.ts') .end() // you can split the bundle by entries also config.entry('special-a') .add('/src/special/a.ts') .end() config.entry('special-b') .add('/src/special/b.ts') .end() }

vue.js - 如何将多个与 Vue 捆绑在一起

问题描述

解决方案

推荐阅读