vue.js - 与 Browserify 的单个文件组件分开包含 Vue 运行时

Question

我目前正在使用 Browserify 将我的 .vue 文件构建为单个文件组件。唯一的问题是每个 SFC 都将 Vue 运行时包含在文件中，导致文件大小比它需要的大得多，因为 Vue 运行时是跨多个页面和 SFC 的通用代码。

我希望使用 Browserify 将其分离出来并跨页面加载共同点。

我已经阅读了有关该主题的大量不同文章，但无法使其中任何一篇起作用。

以下是我构建 Vue SFC 并排除运行时的方式：

b
    .transform('vueify')
    .transform(
        {global: true},
        envify({NODE_ENV: 'production'})
    )
    .external('vue')
    .bundle()

然后我想像这样单独加载Javascript：

<script src="vue.runtime.min.js"></script>
<script src="built-sfc.js"></script>

我尝试了一大堆构建 SFC 和 Vue 运行时的不同组合，但没有任何效果，而且我的想法已经用完了！

Answer 1

我最终弄清楚了，部分问题是我们在 Grunt 的 Vue 构建中的其他问题。

但这是我们用于分别构建运行时和 SFC 的 Grunt 命令

vueRuntime: {
    expand: true,
    cwd: 'node_modules/vue/dist/',
    src: 'vue.runtime.min.js',
    dest: 'js/libs',
    ext: '.js',
    extDot: 'first',
    options: {
        configure: b => b
            .require('vue')
            .transform(
                // Required in order to process node_modules files
                {global: true},
                envify({NODE_ENV: 'production'})
            )
            .bundle(),
        browserifyOptions: {
            debug: false
        }
    }
},
vue: {
    expand: true,
    cwd: 'js/pages/',
    src: '**/*.vue.js',
    dest: 'js/pages',
    ext: '.js',
    extDot: 'first',
    options: {
        configure: b => b
            .transform('vueify')
            .transform(
                // Required in order to process node_modules files
                {global: true},
                envify({NODE_ENV: 'production'})
            )
            .external('vue')
            .bundle(),
        browserifyOptions: {
            debug: false
        }
    }
}