Vue.js 和 Webpack，如何构建组件以实现可移植性

Posted 2023-02-23

【中文标题】Vue.js 和 Webpack，如何构建组件以实现可移植性

【英文标题】：Vue.js and Webpack, how to build components for portability

【发布时间】：2018-05-30 04:52:00

【问题描述】：

假设我有 2 个 Vue.js 应用：app1 和 app2。

两者都实现了单文件组件的方法，并由 webpack 构建到各自的 /dist/build.js 中。

现在我需要在 app2 中使用一个在 app1 内部开发的组件，所以我想知道：有没有办法指示 webpack 不将整个 app1 构建到单个 /dist/build.js 中，而是生成 N 个不同的“构建” js 文件来分隔可重用组件，这样我就可以获取 app1/dist/components.build.js 并以某种方式直接导入 app2 而无需将 .vue 文件复制到那里？

我对 Vue 和 Webpack 还很陌生，所以我什至不确定这个问题是否有意义......

【问题讨论】：

您是否正在寻找类似***.com/questions/47754244/… 的东西？

不，我不需要创建npm包，我只需要一个可以与其他应用程序共享的js文件...

【参考方案1】：

Webpack 支持代码拆分，实际上是它必须提供的更酷的功能之一。

你的 webpack 配置看起来像这样：

module.exports = 
    entry: 
        app1: 'path/to/app1/dir',
        app2: 'path/to/app2/dir/excluding/chunked/component',
        app3: 'path/to/app2/chunked/component',
    ,
    plugins: [
        new htmlWebpackPlugin( title: 'Code Split' ),
        new webpack.optimize.CommonsChunkPlugin(
           name: 'common' // Specify name for your common app modules 
                          // i.e vendors, etc.
        )
    ],
    output: [
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    ]

这样的事情应该可以实现您的目标。它可能需要一些调整，但您应该能够隔离您想要的组件并提取它，同时将所有常见代码捆绑在一起。

【讨论】：

我明天试试！

这似乎是部分解决方案：组件的JS部分实际上已发布，但在运行时无法找到模板（我收到“无法安装组件：模板或渲染函数未定义。”，当我尝试从另一个应用程序实例化组件时。