6

我正在开发一个 vuejs 项目，我们正在尝试将外部 vue cli 应用程序用作库。在这些库中，我们希望能够导出一个路由器配置，该配置会延迟加载这些模块之一中的组件。但是，当我们使用 vue-cli-service 将其编译到库中并且它有惰性块资产时，我们无法使用 webpack 解析它们。

我感觉它与公共路径或一些简单的配置有关，但在这个阶段我只是被卡住并用它撞到墙上。

https://github.com/EvanBurbidge/mono-repo-tester

这是我们正在做的事情的简单概述

App1 -> main app, installs App2, imports { router } from 'app2'
App2 -> library, compiles to common js lib exports router config

app1 的控制台输出 see_screenshot_1 app2 的路由器配置 see_screenshot_2 路由器从 app1 导入 app2 see_screenshot_3

/* config.module.rule('js') */ { test: /\.jsx?$/, exclude: [ function () { /* omitted long function */ } ], use: [ /* config.module.rule('js').use('cache-loader') */ { loader: 'cache-loader', options: { cacheDirectory: '/Users/evan/test/node_modules/.cache/babel-loader', cacheIdentifier: '39e7e586' } }, /* config.module.rule('js').use('babel-loader') */ { loader: 'babel-loader' } ] },

4

2 回答 2

6

我想我知道问题是什么。

看来您正在遭受与 VueJS 捆绑的 webpack 的默认配置不支持您要完成的任务这一事实。事实上，很可能Webpack不支持你想要完成的事情#2471 #6818 #7843。

当您将 app2 编译为 UMD 并尝试通过导入 UMD 在 app1 中使用它时，app2 的动态导入不会被解析，因此不会复制到publicPathapp1 的。由于它是动态导入，因此编译成功到可以部署应用程序的地步。但是，当您尝试加载应用程序时，它开始抱怨缺少块。

这是解决此问题的一种方法：

app2/package.json

{
  "name": "app2",
  ...
  "main": "src/router.js"
}

app2/src/router.js

const Hey = () => import(/*webpackChunkName: 'app2.Hello.vue' */ './components/HelloWorld.vue')

export default [
  {
    path: '/app2',
    component: Hey,
    name: 'app2.hey'
  }
]

app1/router.js

import app2Router from 'app2'
import Home from './views/Home.vue'

export default new Router([
  mode: 'history',
  ...
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    ...app2Router
  ]
])

main通过将or moduleof标记app2/package.json为router.js而不是 UMD 捆绑包，您将强制 app1 构建整个依赖关系图并包括检测到的任何动态导入。这反过来会导致依赖项被正确复制。

您还可以通过使用获得完全相同的结果

import app2Router from 'app2/src/router'
于 2019-01-23T05:33:34.707 回答
0

据说，这个问题现在在 Webpack 5 中得到了修复https://github.com/webpack/webpack/issues/11127

于 2020-11-17T17:19:07.930 回答