Question

我想构建两个独立的vue应用程序，这些应用程序将在快速应用程序中的两个不同路由上提供：“公共”vue应用程序和“admin”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/admin和http://localhost:8080/public提供每个项目必须位于dist的自己的文件夹中，并且拥有公共

我今天拥有的东西：在根目录中创建了文件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()
  }
}

Answer 1

我对此事也很感兴趣。

也许我们可以通过子页面来解决这个问题：

https://cli.vuejs.org/config/#pages： “在多页模式下构建应用程序。每个”页面“应该有一个相应的JavaScript条目文件。该值应该是一个对象，其中键是条目的名称，值为：”

module.exports = {
  pages: {
    index: {
      // entry for the *public* page
      entry: 'src/index/main.js',
      // the source template
      template: 'public/index.html',
      // output as dist/index.html
      filename: 'index.html'
    },
    // an admin subpage 
    // when using the entry-only string format,
    // template is inferred to be `public/subpage.html`
    // and falls back to `public/index.html` if not found.
    // Output filename is inferred to be `admin.html`.
    admin: 'src/admin/main.js'
  }
}

Answer 2

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

在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

有关更多信息，请查看build target docs。

Answer 3

基于此处的其他答案，我发现可以在vue.config.js中指定构建输出目录，而不必在命令行中进行。因此，然后结合使用VUE_CLI_SERVICE_CONFIG_PATH环境变量使事情变得简单得多-每次构建时都不需要复制/删除配置文件。

尽管如此，您确实必须指定Vue配置文件的完整路径。即使在Windows上也可以使用，但是只能在Linux类型的终端上使用（例如，我从Git for Windows安装的Git Bash中对其进行了测试，并且工作正常，但在正常的Windows命令提示符下却无法使用，因为我找不到在npm脚本中设置环境变量的任何方法都可以从那里运行）

https://gist.github.com/EdwardMillen/0c417747cd8ce64b8ba550bdfa582cf5

Answer 4

还可以具有多个vue.config.js配置，并使用VUE_CLI_SERVICE_CONFIG_PATH环境变量进行切换。

例如，我们可以有一个默认的vue.config.js和一个附加的vue.public.config.js并按以下方式运行构建：

# Build using vue.config.public.js
# Note: using real path here, it didn't work with relative path
CONF=`realpath vue.config.public.js`
VUE_CLI_SERVICE_CONFIG_PATH=$CONF npm run build

# Build using default vue.config.js
npm run build

在npm run build中将package.json定义为vue-cli-service build的地方：

"scripts": {
    "build": "vue-cli-service build"
}

注意：我在文档中的VUE_CLI_SERVICE_CONFIG_PATH上没有发现任何提及，而是在source code上找到了。

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

4 个答案: