# Конфигурация сборки
Конфигурация webpack для проекта с SSR аналогична конфигурации проекта только для клиентской стороны. Если ещё не знакомы с настройкой webpack, более подробную информацию можно найти в документации Vue CLI
# Ключевые отличия от сборки только для клиента
- Необходимо создать манифест webpack
"scripts": "build:client": "vue-cli-service build --dest dist/client", "build:server": "SSR=1 vue-cli-service build --dest dist/server", "build": "npm run build:client && npm run build:server", > # Пример конфигурации
Ниже приведён пример vue.config.js , который добавляет SSR в проект Vue CLI, но его можно адаптировать для любой сборки webpack.
const WebpackManifestPlugin > = require('webpack-manifest-plugin') const nodeExternals = require('webpack-node-externals') const webpack = require('webpack') module.exports = chainWebpack: webpackConfig => // Необходимо отключать cache-loader, иначе в сборке для клиента // будут использоваться кэшированные компоненты из сборки для сервера webpackConfig.module.rule('vue').uses.delete('cache-loader') webpackConfig.module.rule('js').uses.delete('cache-loader') webpackConfig.module.rule('ts').uses.delete('cache-loader') webpackConfig.module.rule('tsx').uses.delete('cache-loader') if (!process.env.SSR) // Определяем точку входа клиентской части приложения webpackConfig .entry('app') .clear() .add('./src/entry-client.js') return > // Определяем точку входа серверной части приложения webpackConfig .entry('app') .clear() .add('./src/entry-server.js') // Это позволяет webpack обрабатывать динамические импорты в соответствии // с подходом в Node, а также указывает `vue-loader` выдавать // серверно-ориентированный код при компиляции компонентов Vue. webpackConfig.target('node') // Это указывает сборке для сервера использовать экспорты в стиле Node webpackConfig.output.libraryTarget('commonjs2') webpackConfig .plugin('manifest') .use(new WebpackManifestPlugin( fileName: 'ssr-manifest.json' >)) // https://webpack.js.org/configuration/externals/#function // https://github.com/liady/webpack-node-externals // Экстернализация зависимостей приложения. Это сделает сборку для сервера // гораздо быстрее и создаст более лёгкий файл итоговой сборки. // Не нужно экстернализировать зависимости, которые должны обрабатываться webpack. // Также следует внести в белый список зависимости, которые изменяют `global` (например, полифилы) webpackConfig.externals(nodeExternals( allowlist: /\.(css|vue)$/ >)) webpackConfig.optimization.splitChunks(false).minimize(false) webpackConfig.plugins.delete('preload') webpackConfig.plugins.delete('prefetch') webpackConfig.plugins.delete('progress') webpackConfig.plugins.delete('friendly-errors') webpackConfig.plugin('limit').use( new webpack.optimize.LimitChunkCountPlugin( maxChunks: 1 >) ) > > # Предостережения для externals
Обратите внимание, что в опции externals в белый список добавляются CSS-файлы. Это связано с тем, что CSS импортируемый из зависимостей, всё равно должен обрабатываться webpack. Если импортируете файлы других типов, которые также полагаются на webpack (например, *.vue , *.sass ), их тоже следует добавить в белый список.
При использовании runInNewContext: ‘once’ или runInNewContext: true необходимо добавить в белый список полифилы, изменяющие global (например, babel-polyfill ). Это требуется для того, что при использовании режима нового контекста код внутри сборки для сервера будет иметь свой собственный объект global . Поскольку на сервере он не нужен, проще просто импортировать его в файл клиентской точки входа.
# Генерация clientManifest
В дополнение к серверной сборке также можно сгенерировать манифест клиентской сборки. Благодаря клиентскому манифесту и серверной сборке, рендерер будет иметь информацию как о серверной так и о клиентской сборках. Благодаря этому он сможет автоматически определять и внедрять директивы для preload / prefetch
Выгода от этого двойная:
- Он заменяет html-webpack-plugin для внедрения корректных URL ресурсов, когда в именах генерируемых файлов присутствуют хэши.
- При генерации сборки, которая использует возможности webpack по разделению кода, можно обеспечить preload / prefetch необходимых фрагментов, а также интеллектуально внедрять теги для требуемых асинхронных фрагментов, чтобы избежать водопада запросов на клиенте, тем самым улучшая TTI (time-to-interactive).
(opens new window)
Последнее обновление страницы: около 2 лет назад
Работа с Webpack #
Самый простой способ изменять конфигурацию webpack — использовать объект в опции configureWebpack в файле vue.config.js :
// vue.config.js module.exports = configureWebpack: plugins: [ new MyAwesomeWebpackPlugin() ] > > Объект будет объединён в итоговую конфигурацию webpack с помощью webpack-merge.
Некоторые параметры webpack устанавливаются на основе значений из vue.config.js и не должны изменяться напрямую. Например, вместо изменения output.path нужно использовать опцию outputDir в vue.config.js ; а вместо output.publicPath нужно использовать опцию publicPath в vue.config.js . Это связано с тем, что значения из vue.config.js используются в нескольких местах внутри конфигурации и необходимо гарантировать что всё вместе будет работать правильно.
Если необходимо условное поведение, в зависимости от окружения, или вы хотите напрямую изменять конфигурацию — используйте функцию (будет лениво выполняться после установки переменных окружения). Она получает итоговую конфигурацию в качестве аргумента. Внутри функции можно напрямую изменить конфигурацию, ИЛИ вернуть объект для объединения:
// vue.config.js module.exports = configureWebpack: config => if (process.env.NODE_ENV === 'production') // изменение конфигурации для production. > else // изменения для разработки. > > > Chaining (Продвинутый вариант) #
Внутренняя конфигурация webpack поддерживается с использованием webpack-chain. Библиотека предоставляет абстракцию над обычной конфигурацией webpack, добавляет возможность задавать именованные правила для загрузчиков и плагинов, а затем выбирать эти правила по имени и изменять их параметры.
Это позволяет осуществлять более тонкий контроль над встроенной конфигурацией. Ниже вы увидите примеры изменений, выполненных с помощью опции chainWebpack в vue.config.js .
Команда vue inspect пригодится, когда вы будете пробовать добраться до определённого загрузчика в цепочке.
Изменение настроек загрузчика #
// vue.config.js module.exports = chainWebpack: config => config.module .rule('vue') .use('vue-loader') .tap(options => // изменение настроек. return options >) > > Для загрузчиков связанных с CSS, рекомендуется использовать css.loaderOptions вместо изменения напрямую через chaining. Это связано с тем, что для каждого типа CSS-файлов существуют несколько правил, а css.loaderOptions гарантирует, что вы сможете повлиять на все эти правила в одном месте.
Добавление нового загрузчика #
// vue.config.js module.exports = chainWebpack: config => // Загрузчик GraphQL config.module .rule('graphql') .test(/\.graphql$/) .use('graphql-tag/loader') .loader('graphql-tag/loader') .end() // Добавление ещё одного загрузчика .use('other-loader') .loader('other-loader') .end() > > Замена загрузчиков для правила #
Если вы хотите заменить существующий базовый загрузчик, например воспользоваться vue-svg-loader для вставки SVG-файлов инлайн вместо загрузки обычными файлами:
// vue.config.js module.exports = chainWebpack: config => const svgRule = config.module.rule('svg') // очищаем все существующие загрузчики. // если вы этого не сделаете, загрузчик ниже будет добавлен // к уже существующим загрузчикам для этого правила. svgRule.uses.clear() // добавляем загрузчик для замены svgRule .use('vue-svg-loader') .loader('vue-svg-loader') > > Изменение настроек плагина #
// vue.config.js module.exports = chainWebpack: config => config .plugin('html') .tap(args => return [/* новые args для передачи в конструктор html-webpack-plugin */] >) > > Вам потребуется ознакомиться с API webpack-chain и изучить исходный код чтобы понять как использовать всю мощь этой опции, но она даст вам более выразительный и безопасный способ изменения конфигурации webpack в отличие от изменения значений напрямую.
Например, предположим, необходимо изменить местоположение index.html по умолчанию с /Users/test/proj/public/index.html на /Users/test/proj/app/templates/index.html . По ссылке html-webpack-plugin перечислен список параметров, которые можем передавать. Чтобы изменить шаблон, передадим новый путь к шаблону следующей конфигурацией:
// vue.config.js module.exports = chainWebpack: config => config .plugin('html') .tap(args => args[0].template = '/Users/test/proj/app/templates/index.html' return args >) > > Вы можете убедиться, что изменение произошло, изучив конфигурацию webpack с помощью команды vue inspect , о которой мы поговорим дальше.
Просмотр конфигурации Webpack проекта #
Поскольку @vue/cli-service абстрагируется от конфигурации webpack, может быть сложнее понять, что включено в конфигурацию, особенно когда вносите изменения самостоятельно.
vue-cli-service предоставляет команду inspect для проверки итоговой конфигурации webpack. Глобальный бинарник vue также предоставляет команду inspect , которая просто проксируется в vue-cli-service inspect вашего проекта.
Команда выведет в stdout итоговую конфигурацию webpack, которая будет также снабжена подсказками, как обращаться к правилам и плагинам через chaining.
Вы можете перенаправить вывод в файл для более удобного изучения:
vue inspect > output.js По умолчанию команда inspect показывает конфигурацию для разработки. Для отображения конфигурации для production необходимо запустить:
vue inspect --mode production > output.prod.js Обратите внимание, что вывод не является файлом рабочей конфигурации webpack, это только сериализованный формат предназначенный для проверки.
Вы также можете указать подмножество конфигурации для проверки, указав путь:
# показать только первое правило vue inspect module.rules.0 Или указать именованное правило или плагин:
vue inspect --rule vue vue inspect --plugin html Наконец, вы можете вывести все именованные правила и плагины:
vue inspect --rules vue inspect --plugins Использование файла итоговой конфигурации #
Некоторым инструментам может потребоваться файл итоговой конфигурации webpack, например для IDE или утилит командной строки, которым необходимо указывать путь до конфигурации webpack. В таком случае вы можете использовать следующий путь:
/node_modules/@vue/cli-service/webpack.config.js Этот файл динамически разрешается и экспортирует ту же конфигурацию webpack, которая используется в командах vue-cli-service , в том числе из плагинов и даже ваших пользовательских конфигураций.
Where is «vue.config.js» file?
I’ve just started to learn Vue but I simply can’t set up enviroment for my container. I use Cloud9 and I have to assign my host for serving Vue app according to this link. Unfortunately, I can’t find vue.config.js file to do this. Also there is no path indication in Vue docs. «if it’s present in your project root. » but what if not? Whatever, go use React? 🙂 Vue version: 3.1.1
asked Nov 7, 2018 at 12:32
mr.incredible mr.incredible
3,791 8 8 gold badges 40 40 silver badges 72 72 bronze badges
Just create one in the main directory of your project (where your package.json file is located)
Nov 7, 2018 at 12:33
Possible duplicate of Vue Cli 3.0 where is the config file?
Jan 21, 2019 at 12:18
3 Answers 3
vue.config.js is an optional config file that will be automatically loaded by @vue/cli-service if it’s present in your project root (next to package.json ). You can also use the vue field in package.json , but do note in that case you will be limited to JSON-compatible values only.
The file should export an object containing options:
// vue.config.js module.exports = < // options. >So just create the file by yourself. It is completely optional.
answered Nov 7, 2018 at 12:34
43.3k 17 17 gold badges 110 110 silver badges 129 129 bronze badges
I wish this few words also you may create this file in the root of your project manually were in the docs too..
Nov 7, 2018 at 12:40
@mr.boris You can edit the page on GitHub or create an issue about your concern 🙂
Nov 7, 2018 at 12:56
can this file be modified after compile time? or only before? (we want 1 image on multiple environments)
Aug 16, 2021 at 17:58
It’s simple just create file vue.config.js in ROOT folder of project.
Its very important file. it’s on top of vue project. People usualy use more than one page in old fasion style. vue.config.js is right place to define main dependency pages.
I used to create main sigle-page app (pwa) but i also need some other pages. Like error pages or google verify for example.
You can change dev server port , sourceMap enable/disable or PWA configuration.
module.exports = < pages: < 'index': < entry: './src/main.ts', template: 'public/index.html', title: 'Welcome to my vue generator project', chunks: ['chunk-vendors', 'chunk-common', 'index'] >, 'bad': < entry: './src/error-instance.ts', template: 'public/bad.html', title: 'Error page', chunks: ['chunk-vendors', 'chunk-common', 'index'] >, /* Disabled - Only one time 'googleVerify': < entry: './src/error-instance.ts', template: 'public/somelink.html', title: 'Error page', chunks: ['chunk-vendors', 'chunk-common', 'index'] >, */ >, devServer: < 'port': 3000 >, css: < sourceMap: false >, pwa: < name: 'My App', themeColor: '#4DBA87', msTileColor: '#000000', appleMobileWebAppCapable: 'yes', appleMobileWebAppStatusBarStyle: 'black', >, >
For this config here’s main instance file:
import Vue from 'vue' import App from './App.vue' import store from './store' Vue.config.productionTip = false new Vue( < store, render: h =>h(App, < props: < error: 'You can not search for assets. ' >>), >).$mount('#error') Сервис CLI #
Внутри проекта Vue CLI, @vue/cli-service устанавливает бинарник vue-cli-service . К нему можно получить доступ через vue-cli-service в npm-скриптах, или через ./node_modules/.bin/vue-cli-service из терминала.
Это то, что вы увидите в package.json проекта с пресетом настроек по умолчанию:
"scripts": "serve": "vue-cli-service serve", "build": "vue-cli-service build" > > Вы можете вызвать эти команды с помощью npm или Yarn:
npm run serve # ИЛИ yarn serve Если у вас установлен npx (должен поставляться в комплекте с последней версией npm), то вы также можете запустить бинарник напрямую:
npx vue-cli-service serve Запускать команды с дополнительными возможностями можно из GUI через vue ui .
Пример работы Webpack Analyzer запущенного из графического интерфейса:
vue-cli-service serve #
Использование: vue-cli-service serve [options] [entry] Опции: --open открыть браузер при запуске сервера --copy скопировать url в буфер обмена при запуске сервера --mode определить режим сборки (по умолчанию: development) --host определить хост (по умолчанию: 0.0.0.0) --port определить порт (по умолчанию: 8080) --https использовать https (по умолчанию: false) --public указать URL-адрес публичной сети для клиента HMR --skip-plugins имена плагинов через запятую, которые следует пропустить при запуске Копирование в буфер обмена может не работать на некоторых платформах. Если копирование выполнилось успешно, то рядом с URL-адресом локального сервера разработки будет отображено (copied to clipboard) .
Команда vue-cli-service serve запускает сервер для разработки (основанный на webpack-dev-server), предоставляющий из коробки функцию горячей замены модулей.
Кроме флагов командной строки, также можно настраивать сервер для разработки с помощью поля devServer в файле vue.config.js .
В команде CLI [entry] означает входной файл (по умолчанию: src/main.js или src/main.ts в проектах с TypeScript), а не дополнительный входной файл. Если вы перезапишете запись в CLI, тогда записи из config.pages больше не будут учитываться, что может привести к ошибке.
vue-cli-service build #
Использование: vue-cli-service build [options] [entry|pattern] Опции: --mode определить режим сборки (по умолчанию: production) --dest определить каталог сборки (по умолчанию: dist) --modern собирать приложение для современных браузеров с авто-фоллбэком для старых --no-unsafe-inline собирать приложение без внедрения инлайн-скриптов --target app | lib | wc | wc-async (по умолчанию: app) --formats список выходных форматов для сборок библиотек (по умолчанию: commonjs,umd,umd-min) --inline-vue включить Vue в содержимое сборки библиотеки или веб-компонента --name имя библиотеки или режим веб-компонента (по умолчанию: "name" в package.json или имя файла точки входа) --filename имя выходного файла, только для 'lib' (по умолчанию: значение --name) --no-clean не удалять каталог dist перед сборкой проекта --report сгенерировать report.html для анализа содержимого сборки --report-json сгенерировать report.json для анализа содержимого сборки --skip-plugins имена плагинов через запятую, которые следует пропустить при запуске --watch отслеживать изменения Команда vue-cli-service build создаёт готовую для production сборку в каталоге dist/ с минификацией для JS / CSS / HTML и автоматическим разделением вендорного кода в отдельный фрагмент для лучшего кэширования. Манифест фрагмента вставляется инлайн в HTML.
Есть несколько полезных флагов:
- —modern собирает ваше приложение, используя Современный режим, поставляет нативный код ES2015 в современные браузеры, которые поддерживают его, а также автоматический fallback на сборку для старых браузеров.
- —target позволяет вам создавать любые компоненты внутри вашего проекта в виде библиотек или веб-компонентов. Подробнее в разделе Цели сборки.
- —report и —report-json будут генерировать отчёты на основе полученной статистики сборки, которые помогут вам анализировать размеры модулей, используемых в сборке.
vue-cli-service inspect #
Использование: vue-cli-service inspect [options] [. paths] Опции: --mode определить режим сборки (по умолчанию: development) Вы можете использовать vue-cli-service inspect для проверки конфигурации webpack внутри проекта Vue CLI. Подробнее в разделе просмотр конфигурации Webpack проекта.
Список всех доступных команд #
Некоторые плагины CLI добавляют собственные команды в vue-cli-service . Например, @vue/cli-plugin-eslint внедряет команду vue-cli-service lint . Вы можете посмотреть весь список команд запустив:
npx vue-cli-service help Вы также можете узнать о доступных параметрах каждой команды с помощью:
npx vue-cli-service help [command] Исключение плагинов при запуске #
Можно исключить определённые плагины при запуске команды, передав имя плагина опцией —skip-plugins .
npx vue-cli-service build --skip-plugins pwa Опция доступна для любых команд vue-cli-service , в том числе и для пользовательских команд, добавленных другими плагинами.
Можно пропустить несколько подключаемых плагинов, передав их имена через запятую:
npx vue-cli-service build --skip-plugins pwa,apollo Имена плагинов разрешаются также, как и при установке, что подробнее описано здесь
# все вызовы равнозначны npx vue-cli-service build --skip-plugins pwa npx vue-cli-service build --skip-plugins @vue/pwa npx vue-cli-service build --skip-plugins @vue/cli-plugin-pwa Кэширование и параллелизация #
- cache-loader используется для компиляции Vue / Babel / TypeScript по умолчанию. Файлы кэшируются внутри node_modules/.cache — если при запуске будут возникать проблемы с компиляцией, сначала попробуйте удалить каталог кэша.
- thread-loader будет использоваться для транспиляции Babel / TypeScript, когда в системе доступно более 1 процессорного ядра.
Git хуки #
После установки @vue/cli-service также добавляется yorkie, который позволяет легко указывать Git хуки, используя поле gitHooks в файле package.json :
"gitHooks": "pre-commit": "lint-staged" >, "lint-staged": "*.": "vue-cli-service lint" > > yorkie — это форк husky без обратной совместимости с ним.
Конфигурация без извлечения #
Проекты, созданные с помощью vue create уже готовы к работе без необходимости дополнительной настройки. Плагины предназначены для работы друг с другом, поэтому в большинстве случаев всё что вам нужно сделать — это выбрать необходимые возможности во время интерактивных запросов выбора.
Однако мы также понимаем, что невозможно удовлетворить все возможные потребности, как и потребности проекта могут изменяться с течением времени. Поэтому проекты, созданные Vue CLI, позволяют настраивать практически все аспекты без необходимости извлечения конфигурации. Подробную информацию можно найти в разделе Конфигурация.