Включите Vue время выполнения отдельно, чем отдельный файловый компонент с Browserify - PullRequest
Новая
       70

Включите Vue время выполнения отдельно, чем отдельный файловый компонент с Browserify

0 голосов
/ 20 ноября 2018

Я в настоящее время собираю свои файлы .vue в отдельные файловые компоненты с помощью Browserify.Единственная проблема в этом состоит в том, что каждый SFC включает в файл среду выполнения Vue, в результате чего размер файла становится намного больше, чем нужно, поскольку среда выполнения Vue является общим кодом для нескольких страниц и SFC.

Я надеялсяиспользуйте Browserify, чтобы отделить его и загрузить общие страницы.

Я прочитал кучу различных статей по этой теме, но не смог заставить ни одну из них работать.

Вот как я собираю свои VFC 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, но ничего не работает, и у меня закончились идеи!

1 Ответ

0 голосов
/ 17 декабря 2018

В конце концов я понял, что частью проблемы были другие проблемы в нашем здании Vue в Гранте.

Но это команды Grunt, которые мы имеем для зданий, среды выполнения и SFC отдельно 

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