feat: allow vue.config.js to return a function (#3499)

closes #3213

Author: haoqunjiang

packages/@vue/cli-service/__tests__/Service.spec.js

@@ -154,6 +154,22 @@ test('load project options from vue.config.js', () => {
   expect(service.projectOptions.lintOnSave).toBe(false)
 })
 
+test('load project options from vue.config.js', () => {
+  process.env.VUE_CLI_SERVICE_CONFIG_PATH = `/vue.config.js`
+  fs.writeFileSync('/vue.config.js', '')  // only to ensure fs.existsSync returns true
+  jest.mock('/vue.config.js', () => function () { return { lintOnSave: false } }, { virtual: true })
+  mockPkg({
+    vue: {
+      lintOnSave: true
+    }
+  })
+  const service = createMockService()
+  fs.unlinkSync('/vue.config.js')
+  delete process.env.VUE_CLI_SERVICE_CONFIG_PATH
+  // vue.config.js has higher priority
+  expect(service.projectOptions.lintOnSave).toBe(false)
+})
+
 test('api: registerCommand', () => {
   let args
   const service = createMockService([{

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

@@ -281,9 +281,14 @@ module.exports = class Service {
     if (fs.existsSync(configPath)) {
       try {
         fileConfig = require(configPath)
+
+        if (typeof fileConfig === 'function') {
+          fileConfig = fileConfig()
+        }
+
         if (!fileConfig || typeof fileConfig !== 'object') {
           error(
-            `Error loading ${chalk.bold('vue.config.js')}: should export an object.`
+            `Error loading ${chalk.bold('vue.config.js')}: should export an object or a function that returns object.`
           )
           fileConfig = null
         }

packages/@vue/cli-service/types/ProjectOptions.d.ts

@@ -56,3 +56,5 @@ export interface ProjectOptions {
 
   pluginOptions?: object;
 }
+
+export type ConfigFunction = () => ProjectOptions

packages/@vue/cli-service/types/index.d.ts

@@ -1 +1 @@
-export { ProjectOptions } from './ProjectOptions'
+export { ProjectOptions, ConfigFunction } from './ProjectOptions'