使用 Browserify 单独包含 Vue 运行时而不是单个文件组件

Question

我目前正在使用 Browserify 将我的 .vue 文件构建为单个文件组件。唯一的问题是每个 SFC 都将 Vue 运行time 包含在文件中，导致文件大小比需要的大得多，因为 Vue 运行time 是跨多个页面和 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
        }
    }
}

使用 Browserify 单独包含 Vue 运行时而不是单个文件组件

Include Vue runtime separately than single file component with Browserify

vue.js

browserify

grunt-browserify