Как собрать vue-проект в один js-файл?

102
07 ноября 2019, 10:40

нужно проект на vue собрать в один файл (например app.js) Для создания проекта использовал vue-cli-3 и команду vue create <my-project>

но когда собрал проект через npm run build получи на выходе папку /dist/ и в ней несколько папок (/js/css/img/)

Вопрос как настроить сборку в один js-файл?

Answer 1

Используйте webpack(самая примитивная конфигурация):

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    entry: {
        main: './sources/app.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: './',
        filename: 'bundle.js'
    },    
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: 'vue-style-loader!css-loader!style-loader'
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'vue-style-loader'
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin() 
    ]
}

Следует использовать следующие модули(babel по желанию):

npm install vue --save
npm install vue-cli vue-loader vue-style-loader vue-template-compiler webpack webpack-cli css-loader style-loader --save-dev
READ ALSO
при поиске исчезает запятая в массиве

при поиске исчезает запятая в массиве

В общем при поиске, исчезает запятая если 2 должностиЕсли искать вручную имя, то запятая присутствует

96
Вспомогательные методы при отрисовке

Вспомогательные методы при отрисовке

Есть чат, в котором списком выводятся сообщения:

116
Не рабочий скрипт в GoogleSheets ,который показывает изменения в соседней ячейке/диапазоне

Не рабочий скрипт в GoogleSheets ,который показывает изменения в соседней ячейке/диапазоне

Этот вопрос уже поднимался в этой теме : не запускается скрипт И в конце дали рабочий скрипт,но проблема в том,что когда я начал его использовать...

94
Чем являются массивы в js

Чем являются массивы в js

Массив в js это специализированная форма объекта, а объект в js это ассоциативный массивТ

115