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
        }
    }
}

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

1 个答案: