From 11ca8b954f9ef6959b344e452a5c3f7324712585 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Mon, 10 Dec 2018 14:05:30 +0100 Subject: [PATCH 1/3] Add tip abouit detecting modern mode close #2921 --- docs/guide/browser-compatibility.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/guide/browser-compatibility.md b/docs/guide/browser-compatibility.md index 4092573645..445819352a 100644 --- a/docs/guide/browser-compatibility.md +++ b/docs/guide/browser-compatibility.md @@ -78,6 +78,17 @@ Content-Security-Policy: script-src 'self' 'sha256-4RS22DYeB7U14dra4KcQYxmwt5HkO ``` ::: +::: tip Detecting the current mode in config +Sometimes you may need to change the webpack config only for the legacy build, or only for the modern build. + +Vue-cli uses two environment variables to communicate this: + +* `VUE_CLI_MODERN_MODE`: The build was started with the `--modern` flag +* `VUE_CLI_MODERN_BUILD`: when true, the current config is for the modern build. Otherwise it's for the legacy build. + +**Important:** These variables are only accessible in `chainWebpack()` and `configureWebpack()` functions, not in the `vue.config.js` file's root scope. +::: + [autoprefixer]: https://github.com/postcss/autoprefixer [babel-preset-env]: https://new.babeljs.io/docs/en/next/babel-preset-env.html [babel-preset-app]: https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/babel-preset-app From 0502144643195c44772f4e8cecfe880bc4a8f056 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thorsten=20L=C3=BCnborg?= Date: Mon, 10 Dec 2018 14:09:18 +0100 Subject: [PATCH 2/3] add note about postcss --- docs/guide/browser-compatibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/browser-compatibility.md b/docs/guide/browser-compatibility.md index 445819352a..6fea606648 100644 --- a/docs/guide/browser-compatibility.md +++ b/docs/guide/browser-compatibility.md @@ -86,7 +86,7 @@ Vue-cli uses two environment variables to communicate this: * `VUE_CLI_MODERN_MODE`: The build was started with the `--modern` flag * `VUE_CLI_MODERN_BUILD`: when true, the current config is for the modern build. Otherwise it's for the legacy build. -**Important:** These variables are only accessible in `chainWebpack()` and `configureWebpack()` functions, not in the `vue.config.js` file's root scope. +**Important:** These variables are only accessible when/after `chainWebpack()` and `configureWebpack()` functions are evaluated, (so not directly in the `vue.config.js` module's root scope). That means its also available in i.e. the postcss config file. ::: [autoprefixer]: https://github.com/postcss/autoprefixer From 08b5230d653c23b180145eb6aebd83e90d6368ee Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 13 Dec 2018 21:46:17 +0800 Subject: [PATCH 3/3] docs: fix typo and format [ci skip] --- docs/guide/browser-compatibility.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/guide/browser-compatibility.md b/docs/guide/browser-compatibility.md index 6fea606648..3f605d3d67 100644 --- a/docs/guide/browser-compatibility.md +++ b/docs/guide/browser-compatibility.md @@ -78,15 +78,15 @@ Content-Security-Policy: script-src 'self' 'sha256-4RS22DYeB7U14dra4KcQYxmwt5HkO ``` ::: -::: tip Detecting the current mode in config +::: tip Detecting the Current Mode in Config Sometimes you may need to change the webpack config only for the legacy build, or only for the modern build. -Vue-cli uses two environment variables to communicate this: +Vue CLI uses two environment variables to communicate this: * `VUE_CLI_MODERN_MODE`: The build was started with the `--modern` flag * `VUE_CLI_MODERN_BUILD`: when true, the current config is for the modern build. Otherwise it's for the legacy build. -**Important:** These variables are only accessible when/after `chainWebpack()` and `configureWebpack()` functions are evaluated, (so not directly in the `vue.config.js` module's root scope). That means its also available in i.e. the postcss config file. +**Important:** These variables are only accessible when/after `chainWebpack()` and `configureWebpack()` functions are evaluated, (so not directly in the `vue.config.js` module's root scope). That means it's also available in the postcss config file. ::: [autoprefixer]: https://github.com/postcss/autoprefixer