fix: merge custom externals config correctly, supports array (#4429)

closes #4413

Author: haoqunjiang

packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js

@@ -56,17 +56,6 @@ module.exports = (api, { entry, name, formats, filename }, options) => {
       config.optimization.minimize(false)
     }
 
-    // externalize Vue in case user imports it
-    config
-      .externals({
-        ...config.get('externals'),
-        vue: {
-          commonjs: 'vue',
-          commonjs2: 'vue',
-          root: 'Vue'
-        }
-      })
-
     // inject demo page for umd
     if (genHTML) {
       const template = isVueEntry ? 'demo-lib.html' : 'demo-lib-js.html'
@@ -104,6 +93,18 @@ module.exports = (api, { entry, name, formats, filename }, options) => {
       }
     }
 
+    // externalize Vue in case user imports it
+    rawConfig.externals = [
+      ...(Array.isArray(rawConfig.externals) ? rawConfig.externals : [rawConfig.externals]),
+      {
+        vue: {
+          commonjs: 'vue',
+          commonjs2: 'vue',
+          root: 'Vue'
+        }
+      }
+    ].filter(Boolean)
+
     rawConfig.entry = {
       [entryName]: realEntry
     }

packages/@vue/cli-service/lib/commands/build/resolveWcConfig.js

@@ -54,13 +54,6 @@ module.exports = (api, { target, entry, name }) => {
       config.optimization.minimize(false)
     }
 
-    // externalize Vue in case user imports it
-    config
-      .externals({
-        ...config.get('externals'),
-        vue: 'Vue'
-      })
-
     config
       .plugin('web-component-options')
         .use(webpack.EnvironmentPlugin, [{
@@ -103,6 +96,14 @@ module.exports = (api, { target, entry, name }) => {
 
     const rawConfig = api.resolveWebpackConfig(config)
 
+    // externalize Vue in case user imports it
+    rawConfig.externals = [
+      ...(Array.isArray(rawConfig.externals) ? rawConfig.externals : [rawConfig.externals]),
+      {
+        vue: 'Vue'
+      }
+    ].filter(Boolean)
+
     const entryName = `${libName}${minify ? `.min` : ``}`
     rawConfig.entry = {
       [entryName]: dynamicEntry