diff --git a/docs/config/index.md b/docs/config/index.md index 7f446bbdc2..8fb0a57f45 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -22,6 +22,10 @@ The file should export an object containing options: ``` js // vue.config.js + +/** + * @type {import('@vue/cli-service').ProjectOptions} + */ module.exports = { // options... } diff --git a/docs/core-plugins/unit-jest.md b/docs/core-plugins/unit-jest.md index 763750a440..ea378820ff 100644 --- a/docs/core-plugins/unit-jest.md +++ b/docs/core-plugins/unit-jest.md @@ -60,7 +60,7 @@ transformIgnorePatterns: ['/node_modules/'] We have to add exceptions to this pattern with a RegExp negative lookahead: ```javascript -transformIgnorePatterns: ['/node_modules/(?!name-of-lib-o-transform)'] +transformIgnorePatterns: ['/node_modules/(?!name-of-lib-to-transform)'] ``` To exclude multiple libraries: diff --git a/docs/guide/creating-a-project.md b/docs/guide/creating-a-project.md index ab0409e0b5..7278c43e70 100644 --- a/docs/guide/creating-a-project.md +++ b/docs/guide/creating-a-project.md @@ -53,9 +53,11 @@ Options: -g, --git [message|false] Force / skip git initialization, optionally specify initial commit message -n, --no-git Skip git initialization -f, --force Overwrite target directory if it exists + --merge Merge target directory if it exists -c, --clone Use git clone when fetching remote preset -x, --proxy Use specified proxy when creating project -b, --bare Scaffold project without beginner instructions + --skipGetStarted Skip displaying "Get started" instructions -h, --help Output usage information ``` diff --git a/docs/guide/css.md b/docs/guide/css.md index 2f212be5bb..efbf20d085 100644 --- a/docs/guide/css.md +++ b/docs/guide/css.md @@ -21,6 +21,15 @@ npm install -D less-loader less npm install -D stylus-loader stylus ``` +::: tip Note on webpack 4 +When using `webpack` version 4, the default in Vue CLI 4, you need to make sure your loaders are compatible with it. Otherwise you will get errors about confliciting peer dependencies. In this case you can use an older version of the loader that is still compatible with `webpack` 4. + +``` bash +# Sass +npm install -D sass-loader@^10 sass +``` +::: + Then you can import the corresponding file types, or use them in `*.vue` files with: ``` vue diff --git a/docs/guide/deployment.md b/docs/guide/deployment.md index b57f130039..f0ec80d7a6 100644 --- a/docs/guide/deployment.md +++ b/docs/guide/deployment.md @@ -39,7 +39,7 @@ If you are using the PWA plugin, your app must be served over HTTPS so that [Ser 1. Set correct `publicPath` in `vue.config.js`. - If you are deploying to `https://.github.io/`, you can omit `publicPath` as it defaults to `"/"`. + If you are deploying to `https://.github.io/` or to a custom domain, you can omit `publicPath` as it defaults to `"/"`. If you are deploying to `https://.github.io//`, (i.e. your repository is at `https://github.com//`), set `publicPath` to `"//"`. For example, if your repo name is "my-project", your `vue.config.js` should look like this: @@ -75,10 +75,10 @@ If you are using the PWA plugin, your app must be served over HTTPS so that [Ser git commit -m 'deploy' # if you are deploying to https://.github.io - # git push -f git@github.com:/.github.io.git master + # git push -f git@github.com:/.github.io.git main # if you are deploying to https://.github.io/ - # git push -f git@github.com:/.git master:gh-pages + # git push -f git@github.com:/.git main:gh-pages cd - ``` @@ -112,7 +112,7 @@ If you are using the PWA plugin, your app must be served over HTTPS so that [Ser github_token: $GITHUB_TOKEN local_dir: dist on: - branch: master + branch: main ``` 6. Push the `.travis.yml` file to your repository to trigger the first build. @@ -363,7 +363,7 @@ heroku login heroku create heroku buildpacks:add heroku/nodejs heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static -git push heroku master +git push heroku main ``` More info: [Getting started with SPAs on Heroku](https://gist.github.com/hone/24b06869b4c1eca701f9) diff --git a/docs/guide/mode-and-env.md b/docs/guide/mode-and-env.md index 81d9469daa..c6131ea2f1 100644 --- a/docs/guide/mode-and-env.md +++ b/docs/guide/mode-and-env.md @@ -86,7 +86,7 @@ And the following `.env.staging` file: ``` NODE_ENV=production -VUE_APP_TITLE=My App (staging) +VUE_APP_TITLE=My Staging App ``` - `vue-cli-service build` builds a production app, loading `.env`, `.env.production` and `.env.production.local` if they are present; diff --git a/docs/ru/config/index.md b/docs/ru/config/index.md index 2f31f0dd49..f290869fee 100644 --- a/docs/ru/config/index.md +++ b/docs/ru/config/index.md @@ -22,6 +22,10 @@ sidebar: auto ```js // vue.config.js + +/** + * @type {import('@vue/cli-service').ProjectOptions} + */ module.exports = { // настройки... } @@ -267,7 +271,7 @@ module.exports = { - Тип: `boolean | Object` - По умолчанию: `true` в режиме production, `false` в режиме development - Извлечение CSS из ваших компонентов в отдельные CSS-файлы (вместо инлайна в JavaScript и динамического внедрения). + Извлечение CSS из ваших компонентов в отдельный CSS-файл (вместо инлайна в JavaScript и динамического внедрения). Это всегда отключается при сборке веб-компонентов (в этом случае инлайн стили внедряются в shadowRoot). @@ -373,6 +377,16 @@ module.exports = { } ``` +### devServer.inline + +- Тип: `boolean` +- По умолчанию: `true` + + Переключение между двумя режимами работы сервера разработки. Более подробная информация об опции — [devServer.inline](https://webpack.js.org/configuration/dev-server/#devserverinline). Обратите внимание: + + - При использовании `iframe mode` дополнительная конфигурация не требуется. Просто перейдите в браузере по адресу `http://:/webpack-dev-server/` для отладки приложения. В верхней части страницы будут появляться уведомления. + - При использовании `inline mode`, просто перейдите в браузере по адресу `http://:/` для отладки приложения. Сообщения о сборке будут появляться в консоли браузера. + ### parallel - Тип: `boolean | number` diff --git a/docs/ru/core-plugins/eslint.md b/docs/ru/core-plugins/eslint.md index a383a0ea6c..e52b5743b9 100644 --- a/docs/ru/core-plugins/eslint.md +++ b/docs/ru/core-plugins/eslint.md @@ -17,9 +17,13 @@ --max-warnings количество предупреждений, по достижению которого сборка заканчивается ошибкой (по умолчанию: Infinity) ``` - Проверяет и исправляет файлы. Если конкретные файлы для проверки не указаны, то будут проверяться все файлы в `src` и `tests`. + Проверяет и исправляет файлы. Если не указаны конкретные файлы для проверки, то будут проверяться все файлы в `src` и `tests`, а также все файлы JavaScript в корневом каталоге (чаще всего это файлы конфигурации, например `babel.config.js` или `.eslintrc.js`). - Другие [настройки ESLint CLI](https://eslint.org/docs/user-guide/command-line-interface#options) также поддерживаются. + Также поддерживаются и другие [настройки ESLint CLI](https://eslint.org/docs/user-guide/command-line-interface#options). + + :::tip Совет + По умолчанию `vue-cli-service lint` проверяет файлы, именуемые с точки `.*.js`. Если вместо этого требуется поведение ESLint по умолчанию, то следует добавить в проект файл `.eslintignore`. + ::: ## Конфигурация diff --git a/docs/ru/guide/cli-service.md b/docs/ru/guide/cli-service.md index bca0c08064..bf688e058f 100644 --- a/docs/ru/guide/cli-service.md +++ b/docs/ru/guide/cli-service.md @@ -123,16 +123,16 @@ npx vue-cli-service help npx vue-cli-service help [command] ``` -## Пропуск плагинов +## Исключение плагинов при запуске -Иногда при выполнении команды может понадобиться не использовать определённый плагин CLI. К примеру, для создания сборки приложения без плагина PWA. Такого можно добиться передав имя плагина в опцию `--skip-plugins`. +Можно исключить определённые плагины при запуске команды, передав имя плагина опцией `--skip-plugins`. ```bash npx vue-cli-service build --skip-plugins pwa ``` ::: tip СОВЕТ -Опция доступна для _любых_ команд `vue-cli-service`, включая пользовательские команды, добавленные другими плагинами. +Опция доступна для _любых_ команд `vue-cli-service`, в том числе и для пользовательских команд, добавленных другими плагинами. ::: Можно пропустить несколько подключаемых плагинов, передав их имена через запятую: diff --git a/docs/ru/guide/css.md b/docs/ru/guide/css.md index 5e38485a97..f4032ada72 100644 --- a/docs/ru/guide/css.md +++ b/docs/ru/guide/css.md @@ -21,6 +21,15 @@ npm install -D less-loader less npm install -D stylus-loader stylus ``` +:::tip Примечание при использовании webpack 4 +При использовании `webpack` версии 4, по умолчанию во Vue CLI 4, следует убедиться в совместимости используемых загрузчиков. В противном случае будут появляться ошибки о конфликтующих зависимостях. В таких случаях можно использовать более старую версию загрузчика, которая всё ещё совместима с `webpack` 4. + +```bash +# Sass +npm install -D sass-loader@^10 sass +``` +::: + Теперь вы можете импортировать соответствующие типы файлов, или использовать их синтаксис внутри файлов `*.vue` с помощью: ```vue diff --git a/docs/ru/guide/deployment.md b/docs/ru/guide/deployment.md index ca4d532324..632fb9e005 100644 --- a/docs/ru/guide/deployment.md +++ b/docs/ru/guide/deployment.md @@ -39,7 +39,7 @@ serve -s dist 1. Установите корректное значение `publicPath` в `vue.config.js`. - Если вы публикуете по адресу `https://.github.io/`, вы можете опустить `publicPath`, так как оно по умолчанию `"/"`. + Если публикуете по адресу `https://.github.io/` или на пользовательский домен, то можно опустить `publicPath`, так как оно по умолчанию `"/"`. Если вы публикуете по адресу `https://.github.io//`, (т.е. ваш репозиторий находится по адресу `https://github.com//`), установите `publicPath` в значение `"//"`. Например, если ваш репозиторий называется "my-project", то ваш `vue.config.js` будет выглядеть примерно так: @@ -163,15 +163,32 @@ module.exports = { Также посмотрите [vue-cli-plugin-netlify-lambda](https://github.com/netlify/vue-cli-plugin-netlify-lambda). -Для получения прямых хитов при использовании `режима history` во Vue Router, необходимо создавать файл `_redirects` в каталоге `/public` со следующим содержимым: +#### Использование режима history во Vue Router + +Для получения прямых хитов при использовании `режима history` во Vue Router, необходимо перенаправлять весь трафик в файл `/index.html`. + +> Подробнее можно изучить в [документации Netlify по перенаправлениям](https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps). + +##### Рекомендуемый метод + +Создать файл `netlify.toml` в корневом каталоге репозитория со следующим содержимым: + +```toml +[[redirects]] + from = "/*" + to = "/index.html" + status = 200 +``` + +##### Альтернативный метод + +Создать файл `_redirects` в каталоге `/public` со следующим содержимым: ``` # Настройки Netlify для одностраничных приложений (SPA) /* /index.html 200 ``` -Подробнее можно изучить в [документации Netlify по перенаправлениям](https://www.netlify.com/docs/redirects/#history-pushstate-and-single-page-apps). - При использовании [@vue/cli-plugin-pwa](../core-plugins/pwa.md#vue-cli-plugin-pwa) убедитесь, что файл `_redirects` не кэшируется service worker. Для этого добавьте в `vue.config.js` следующее: @@ -194,11 +211,10 @@ module.exports = { [Render](https://render.com) предлагает [бесплатный хостинг статических сайтов](https://render.com/docs/static-sites) с полностью управляемым SSL, глобальным CDN и непрерывным автоматическим развёртыванием из GitHub. -1. Создайте новый Web Service в Render, и предоставьте доступ для GitHub-приложения Render в репозиторий. +1. Создайте новый Static Site в Render, и предоставьте доступ для GitHub-приложения Render в репозиторий. 2. При создании используйте следующие значения: - - **Окружение:** `Static Site` - **Команда сборки:** `npm run build` или `yarn build` - **Каталог публикации:** `dist` diff --git a/docs/ru/guide/mode-and-env.md b/docs/ru/guide/mode-and-env.md index 07cf7dfee1..2fbde776ba 100644 --- a/docs/ru/guide/mode-and-env.md +++ b/docs/ru/guide/mode-and-env.md @@ -54,7 +54,13 @@ VUE_APP_NOT_SECRET_CODE=some_value Обратите внимание, что только `NODE_ENV`, `BASE_URL` и переменные, именованные с префикса `VUE_APP_`, статически внедрятся в *клиентскую сборку* с помощью `webpack.DefinePlugin`. Это сделано во избежание случайного обнародования закрытого ключа на машине, которая может иметь такое же имя. -Подробнее о правилах парсинга env можно узнать [в документации `dotenv`](https://github.com/motdotla/dotenv#rules). Мы также используем [dotenv-expand](https://github.com/motdotla/dotenv-expand) для переменных расширения (доступно в Vue CLI 3.5+). +Подробнее о правилах парсинга env [в документации `dotenv`](https://github.com/motdotla/dotenv#rules). Можно также использовать [dotenv-expand](https://github.com/motdotla/dotenv-expand) для переменных расширения (доступно с версии Vue CLI 3.5+). Например: + +```bash +FOO=foo +BAR=bar +CONCAT=$FOO$BAR # CONCAT=foobar +``` Загруженные переменные станут доступны всем командам `vue-cli-service`, плагинам и зависимостям. @@ -78,7 +84,7 @@ VUE_APP_TITLE=My App ``` NODE_ENV=production -VUE_APP_TITLE=My App (staging) +VUE_APP_TITLE=My Staging App ``` - `vue-cli-service build` собирает приложение для production, загружает `.env`, `.env.production` и `.env.production.local` если они существуют; diff --git a/docs/zh/config/index.md b/docs/zh/config/index.md index 873b3a0465..08529ad8d5 100644 --- a/docs/zh/config/index.md +++ b/docs/zh/config/index.md @@ -22,6 +22,10 @@ sidebar: auto ``` js // vue.config.js + +/** + * @type {import('@vue/cli-service').ProjectOptions} + */ module.exports = { // 选项... } diff --git a/docs/zh/dev-guide/plugin-dev.md b/docs/zh/dev-guide/plugin-dev.md index 7b462fcff7..8c71d9b45b 100644 --- a/docs/zh/dev-guide/plugin-dev.md +++ b/docs/zh/dev-guide/plugin-dev.md @@ -152,7 +152,7 @@ export default { extend: '@vue/cli-service/generator/template/src/App.vue' replace: - !!js/regexp /Welcome to Your Vue\.js App/ - - !!js/regexp /