```
будет скомпилирован в:
-``` js
+```js
h('img', { attrs: { src: require('./image.png') }})
```
@@ -129,7 +133,7 @@ h('img', { attrs: { src: require('./image.png') }})
Изменить размер можно через [chainWebpack](../config/#chainwebpack). Например, чтобы установить лимит в 10 КБайт:
-``` js
+```js
// vue.config.js
module.exports = {
chainWebpack: config => {
@@ -150,7 +154,7 @@ module.exports = {
- Если URL начинается с `~`, то всё что после него будет интерпретироваться как запрос модуля. Это означает, что вы можете ссылаться на ресурсы даже внутри `node_modules`:
- ``` html
+ ```html
```
@@ -170,13 +174,13 @@ module.exports = {
- В `public/index.html` или других HTML-файлах, используемых `html-webpack-plugin` в качестве шаблонов, необходимо добавлять префикс в ссылки с помощью `<%= BASE_URL %>`:
- ``` html
+ ```html
```
- В шаблонах потребуется сначала передать `BASE_URL` в компонент:
- ``` js
+ ```js
data () {
return {
publicPath: process.env.BASE_URL
@@ -186,7 +190,7 @@ module.exports = {
А затем использовать в шаблоне:
- ``` html
+ ```html
Hello!
@@ -33,13 +36,13 @@ npm install -g @vue/cli-service-global Затем, в каталоге с файлом `App.vue`, выполните команду: -``` bash +```bash vue serve ``` `vue serve` использует такую же конфигурацию по умолчанию (webpack, babel, postcss & eslint) как и проекты создаваемые с помощью `vue create`. Он автоматически выбирает стартовый файл в текущем каталоге — этот файл может быть одним из `main.js`, `index.js`, `App.vue` или `app.vue`. Можно также явно указать стартовый файл: -``` bash +```bash vue serve MyComponent.vue ``` @@ -62,7 +65,7 @@ vue serve MyComponent.vue Вы можете собрать целевой файл в режиме production для публикации с помощью `vue build`: -``` bash +```bash vue build MyComponent.vue ``` diff --git a/docs/ru/guide/troubleshooting.md b/docs/ru/guide/troubleshooting.md new file mode 100644 index 0000000000..4e73a20b30 --- /dev/null +++ b/docs/ru/guide/troubleshooting.md @@ -0,0 +1,34 @@ +# Поиск и устранение неисправностей + +В это документе рассматриваются некоторые общие проблемы, касающиеся Vue CLI, и способы их решения. Прежде чем открывать новый issue, всегда выполняйте следующие действия. + +## Запуск установки через `sudo` или как `root` + +Если устанавливаете `@vue/cli-service` как пользователь `root` или с помощью `sudo`, то могут возникнуть проблемы при запуске скриптов `postinstall` пакета. + +Это функция безопасности npm. Вы всегда должны избегать запуска npm с привилегиями root, потому что сценарии установки скриптов могут быть непреднамеренно вредоносными. + +Однако, если необходимо, то можно обойти эту ошибку, установив флаг `--unsafe-perm` для npm. Это реализуется путём добавления префикса с переменной окружения к команде: + +```bash +npm_config_unsafe_perm=true vue create my-project +``` + +## Символические ссылки в `node_modules` + +Если есть зависимости, установленные через `npm link` или `yarn link`, ESLint (а иногда и Babel) могут работать некорректно для этих слинкованных зависимостей. Это происходит потому, что [по умолчанию webpack разрешает символические ссылки на их настоящее местоположение](https://webpack.js.org/configuration/resolve/#resolvesymlinks), таким образом ломая поиск конфигурации ESLint / Babel. + +Обходным решением этой проблемы будет отключение вручную разрешения символических ссылок в webpack: + +```js +// vue.config.js +module.exports = { + chainWebpack: (config) => { + config.resolve.symlinks(false) + } +} +``` + +::: warning ПРЕДУПРЕЖДЕНИЕ +Отключение `resolve.symlinks` может сломать горячую перезагрузку модулей, если ваши зависимости устанавливались сторонними npm-клиентами, использующие символические ссылки, такие как `cnpm` или `pnpm`. +::: diff --git a/docs/ru/guide/webpack.md b/docs/ru/guide/webpack.md index 9151be65cb..0dd02a874c 100644 --- a/docs/ru/guide/webpack.md +++ b/docs/ru/guide/webpack.md @@ -4,7 +4,7 @@ Самый простой способ изменять конфигурацию webpack — использовать объект в опции `configureWebpack` в файле `vue.config.js`: -``` js +```js // vue.config.js module.exports = { configureWebpack: { @@ -23,7 +23,7 @@ module.exports = { Если необходимо условное поведение, в зависимости от окружения, или вы хотите напрямую изменять конфигурацию — используйте функцию (будет лениво выполняться после установки переменных окружения). Она получает итоговую конфигурацию в качестве аргумента. Внутри функции можно напрямую изменить конфигурацию, ИЛИ вернуть объект для объединения: -``` js +```js // vue.config.js module.exports = { configureWebpack: config => { @@ -48,7 +48,7 @@ module.exports = { ### Изменение настроек загрузчика -``` js +```js // vue.config.js module.exports = { chainWebpack: config => { @@ -70,7 +70,7 @@ module.exports = { ### Добавление нового загрузчика -``` js +```js // vue.config.js module.exports = { chainWebpack: config => { @@ -89,7 +89,7 @@ module.exports = { Если вы хотите заменить существующий [базовый загрузчик](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-service/lib/config/base.js), например воспользоваться `vue-svg-loader` для вставки SVG-файлов инлайн вместо загрузки обычными файлами: -``` js +```js // vue.config.js module.exports = { chainWebpack: config => { @@ -110,7 +110,7 @@ module.exports = { ### Изменение настроек плагина -``` js +```js // vue.config.js module.exports = { chainWebpack: config => { @@ -127,7 +127,7 @@ module.exports = { Например, предположим, необходимо изменить местоположение `index.html` по умолчанию с `/Users/test/proj/public/index.html` на `/Users/test/proj/app/templates/index.html`. По ссылке [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin#options) перечислен список параметров, которые можем передавать. Чтобы изменить шаблон, передадим новый путь к шаблону следующей конфигурацией: -``` js +```js // vue.config.js module.exports = { chainWebpack: config => { @@ -153,7 +153,7 @@ module.exports = { Вы можете перенаправить вывод в файл для более удобного изучения: -``` bash +```bash vue inspect > output.js ``` @@ -161,21 +161,21 @@ vue inspect > output.js Вы также можете указать подмножество конфигурации для проверки, указав путь: -``` bash +```bash # показать только первое правило vue inspect module.rules.0 ``` Или указать именованное правило или плагин: -``` bash +```bash vue inspect --rule vue vue inspect --plugin html ``` Наконец, вы можете вывести все именованные правила и плагины: -``` bash +```bash vue inspect --rules vue inspect --plugins ``` diff --git a/docs/ru/migrating-from-v3/README.md b/docs/ru/migrating-from-v3/README.md new file mode 100644 index 0000000000..d79818e955 --- /dev/null +++ b/docs/ru/migrating-from-v3/README.md @@ -0,0 +1,299 @@ +--- +sidebar: auto +--- + +# Миграция с версии v3 + +Для начала глобально установите последнюю версию Vue CLI: + +```sh +npm install -g @vue/cli +# ИЛИ +yarn global add @vue/cli +``` + +## Обновление всех плагинов сразу + +В существующих проектах запустите команду: + +```sh +vue upgrade +``` + +После чего ознакомьтесь со следующим разделом с информацией о крупных изменениях (breaking changes) в каждом пакете. + +------ + +## Миграция вручную по одному пакету + +При желании выполнить миграцию постепенно и вручную несколько советов: + +### Глобальный пакет `@vue/cli` + +#### [Переработана команда](https://github.com/vuejs/vue-cli/pull/4090) `vue upgrade` + +- Было: `vue upgrade [patch | minor | major]` — выполняла только установку последних версий плагинов Vue CLI. +- Стало: `vue upgrade [plugin-name]` — кроме обновления плагинов, запускает миграции из них для автоматизации процесса обновления. Для получения информации о дополнительных опциях этой команды выполните `vue upgrade --help`. + +#### Изменён формат вывода `vue --version` + +При запуске `vue --version`: + +- 3.x: выводит `3.12.0` +- 4.x: выводит `@vue/cli 4.0.0` + +#### Добавлен дополнительный шаг подтверждения во избежание перезаписи + +При запуске `vue invoke` / `vue add` / `vue upgrade` теперь появляется [дополнительный шаг подтверждения](https://github.com/vuejs/vue-cli/pull/4275) при наличии незафиксированных изменений в текущем репозитории. + + + +#### Vue Router и Vuex теперь имеют сопутствующие CLI-плагины + +При запуске `vue add vuex` или `vue add router`: + +- В версии 3, только `vuex` или `vue-router` добавляется в проект; +- В версии 4, также устанавливается `@vue/cli-plugin-vuex` или `@vue/cli-plugin-router`. + +В настоящее время это не привносит ничего особенного для конечных пользователей, но такой подход позволяет добавлять больше возможностей для пользователей Vuex и Vue Router позднее. + +Для разработчиков пресетов и плагинов есть ещё несколько изменений в этих двух плагинах: + +- Структура каталогов по умолчанию изменена: + - `src/store.js` перемещён в `src/store/index.js`; + - `src/router.js` перемещён в `src/router/index.js`; +- Опции `router` и `routerHistoryMode` в файле `preset.json` по-прежнему поддерживаются для совместимости. Но рекомендуется использовать `plugins: { '@vue/cli-plugin-router': { historyMode: true } }` для консистентности. +- `api.hasPlugin('vue-router')` больше не поддерживается. Теперь `api.hasPlugin('router')`. + +### `@vue/cli-service` + +#### Обработка пробелов в шаблонах + +Во Vue CLI v3 для уменьшения размеров итоговой сборки по умолчанию отключена опция `preserveWhitespace` для `vue-template-compiler`. + +Однако это привносило свои тонкости использования. + +Но после релиза Vue 2.6 теперь можно управлять обработкой пробелов с помощью [новой опции `whitespace`](https://github.com/vuejs/vue/issues/9208#issuecomment-450012518). Поэтому во Vue CLI v4 перешли на использование этой новой опции по умолчанию. + +Возьмём в качестве примера следующий шаблон: + +```html ++ Welcome to Vue.js world. + Have fun! +
+``` + +С опцией `preserveWhitespace: false` все пробелы между тегами будут удалены, поэтому он скомпилируется в: + +```html +Welcome to Vue.jsworld. Have fun!
+``` + +С опцией `whitespace: 'condense'` он скомпилируется в: + +```html +Welcome to Vue.js world. Have fun!
+``` + +Обратите внимание, что теперь сохраняется **инлайновый** пробел между тегами. + +#### `vue-cli-service build --mode development` + +Раньше при запуске команды `build` в режиме `development` расположение каталога `dist` отличалось от расположения в режиме `production`. Теперь, с учётом указанных ниже двух пулл-реквестов, структура и расположение каталогов будет во всех режимах одинакова (имена файлов всё ещё различаются — никаких хэшей в режиме `development`): + +- [#4323](https://github.com/vuejs/vue-cli/pull/4323) ensure consistent directory structure for all modes +- [#4302](https://github.com/vuejs/vue-cli/pull/4302) move dev configs into serve command + +#### Для пользователей SASS/SCSS + +Раньше во Vue CLI v3 использовался `sass-loader@7` по умолчанию. + +Недавно вышел `sass-loader@8` в котором довольно сильно изменился формат конфигурации. Примечания к релизу: