feat(cli-service): add envs dir config

docs/config/README.md

@@ -80,6 +80,13 @@ module.exports = {
   `assetsDir` is ignored when overwriting the filename or chunkFilename from the generated assets.
   :::
 
+### environmentsDir
+
+- Type: `string`
+- Default: `''`
+
+  A directory where environment files will be loaded  
+
 ### indexPath
 
 - Type: `string`

docs/guide/mode-and-env.md

@@ -1,6 +1,6 @@
 # Environment Variables and Modes
 
-You can specify env variables by placing the following files in your project root:
+You can specify env variables by placing the following files in your project root or customize it using `environmentsDir` option in `vue.config.js`:
 
 ``` bash
 .env                # loaded in all cases

packages/@vue/cli-service/lib/Service.js

@@ -61,17 +61,17 @@ module.exports = class Service {
     this.initialized = true
     this.mode = mode
 
+    // load user config
+    const userOptions = this.loadUserOptions()
+    this.projectOptions = defaultsDeep(userOptions, defaults())
+
     // load mode .env
     if (mode) {
       this.loadEnv(mode)
     }
     // load base .env
     this.loadEnv()
 
-    // load user config
-    const userOptions = this.loadUserOptions()
-    this.projectOptions = defaultsDeep(userOptions, defaults())
-
     debug('vue:project-config')(this.projectOptions)
 
     // apply plugins.
@@ -90,7 +90,9 @@ module.exports = class Service {
 
   loadEnv (mode) {
     const logger = debug('vue:env')
-    const basePath = path.resolve(this.context, `.env${mode ? `.${mode}` : ``}`)
+    const baseDir = this.projectOptions
+      ? path.posix.join(this.context, this.projectOptions.environmentsDir) : this.context
+    const basePath = path.resolve(baseDir, `.env${mode ? `.${mode}` : ``}`)
     const localPath = `${basePath}.local`
 
     const load = path => {

packages/@vue/cli-service/lib/options.js

@@ -4,6 +4,7 @@ const schema = createSchema(joi => joi.object({
   baseUrl: joi.string().allow(''),
   outputDir: joi.string(),
   assetsDir: joi.string().allow(''),
+  environmentsDir: joi.string().allow(''),
   indexPath: joi.string(),
   filenameHashing: joi.boolean(),
   runtimeCompiler: joi.boolean(),
@@ -71,6 +72,9 @@ exports.defaults = () => ({
   // where to put static assets (js/css/img/font/...)
   assetsDir: '',
 
+  // where to load environments
+  environmentsDir: '',
+
   // filename for index.html (relative to outputDir)
   indexPath: 'index.html',
 

packages/@vue/cli-ui/locales/en.json

@@ -591,6 +591,10 @@
               "label": "Assets directory",
               "description": "A directory to nest generated static assets (js, css, img, fonts) under."
             },
+            "environmentsDir": {
+              "label": "Environments directory",
+              "description": "The directory where the environment files will be loaded"
+            },
             "runtimeCompiler": {
               "label": "Enable runtime compiler",
               "description": "This will allow you to use the template option in Vue components, but will incur around an extra 10kb payload for your app."

packages/@vue/cli-ui/ui-defaults/config.js

@@ -43,6 +43,16 @@ module.exports = api => {
           group: 'org.vue.vue-webpack.config.vue-cli.groups.general',
           link: 'https://cli.vuejs.org/config/#assetsdir'
         },
+        {
+          name: 'environmentsDir',
+          type: 'input',
+          default: '',
+          value: data.vue && data.vue.environmentsDir,
+          message: 'org.vue.vue-webpack.config.vue-cli.environmentsDir.label',
+          description: 'org.vue.vue-webpack.config.vue-cli.environmentsDir.description',
+          group: 'org.vue.vue-webpack.config.vue-cli.groups.general',
+          link: 'https://cli.vuejs.org/config/#environmentsdir'
+        },
         {
           name: 'runtimeCompiler',
           type: 'confirm',