如何使用vue-cli 3创建两个单独的捆绑包?

vue.js Vue.js

小宇宙神奇飞云

2020-03-12

我想构建两个单独的vue应用程序,这些应用程序将在快速应用程序中的两条不同路线上投放:“公共” vue应用程序和“管理员” vue应用程序。这两个应用程序都有自己的路由器和存储,但它们共享许多自定义组件。如何编辑默认的Webpack模板,使其基于两个不同的入口点(“ public”和“ admin”)输出两个单独的捆绑包?目标是最终完成一个或多或少这样的设置:

my-app/
+- ...
+- dist/
|  +- admin/         Admin bundle and files
|  +- public/        Public bundle and files
+- src/
|  +- components/    Shared components
|  +- admin/         Entry point, router, store... for the admin app
|  +- public/        Entry point, router, store... for the public app
+- ...

必须由2个开发服务器提供http:// localhost:8080 / adminhttp:// localhost:8080 / public 每个项目必须位于dist中自己的文件夹中,并且自己具有public

我今天拥有的东西:在根目录中创建文件vue.config.js包含:

module.exports = {
  // tweak internal webpack configuration.
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: config => {
    // If you wish to remove the standard entry point
    config.entryPoints.delete('app')

    // then add your own
    config.entry('admin')
      .add('./src/admin/index.js')
      .end()
    .entry('public')
      .add('./src/public/index.js')
      .end()
  }
}

第886篇《如何使用vue-cli 3创建两个单独的捆绑包?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
神奇乐猪猪 2020.03.12

假设您需要完全独立的构建,并以条目为指导使用一些共享脚本,则可以添加独立的构建命令。

在您的package.json“脚本”部分中:

"scripts": {
    "build:admin": "vue-cli-service build --dest dist/admin src/admin/index.js,
    "build:public": "vue-cli-service build --dest dist/public src/public/index.js
}

对于管理员版本,您可以运行:

npm run build:admin

对于公共建筑:

npm run build:public

有关更多信息,请查看构建目标文档

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android