diff --git a/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js b/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js
index 1c5d6c25c5..21f3d349a0 100644
--- a/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js
+++ b/packages/@vue/cli-plugin-babel/__tests__/transpileDependencies.spec.js
@@ -13,6 +13,12 @@ async function readVendorFile () {
   return project.read(`dist/js/${filename}`)
 }
 
+async function readLegacyVendorFile () {
+  const files = await fs.readdir(path.join(project.dir, 'dist/js'))
+  const filename = files.find(f => /chunk-vendors-legacy\.[^.]+\.js$/.test(f))
+  return project.read(`dist/js/${filename}`)
+}
+
 beforeAll(async () => {
   project = await create('babel-transpile-deps', defaultPreset)
 
@@ -39,6 +45,8 @@ beforeAll(async () => {
   let $packageJson = await project.read('package.json')
 
   $packageJson = JSON.parse($packageJson)
+  $packageJson.browserslist.push('ie 11') // to ensure arrow function transformation is enabled
+  $packageJson.browserslist.push('safari 11') // to ensure optional chaining transformation is enabled
   $packageJson.dependencies['external-dep'] = '1.0.0'
   $packageJson.dependencies['@scope/external-dep'] = '1.0.0'
   $packageJson = JSON.stringify($packageJson)
@@ -70,7 +78,7 @@ afterAll(async () => {
 
 test('dep from node_modules should not been transpiled by default', async () => {
   await project.run('vue-cli-service build')
-  expect(await readVendorFile()).toMatch('() => "__TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('() => "__TEST__"')
 })
 
 test('dep from node_modules should been transpiled when matched by transpileDependencies', async () => {
@@ -79,9 +87,9 @@ test('dep from node_modules should been transpiled when matched by transpileDepe
     `module.exports = { transpileDependencies: ['external-dep', '@scope/external-dep'] }`
   )
   await project.run('vue-cli-service build')
-  expect(await readVendorFile()).toMatch('return "__TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('return "__TEST__"')
 
-  expect(await readVendorFile()).toMatch('return "__SCOPE_TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('return "__SCOPE_TEST__"')
 })
 
 test('dep from node_modules should been transpiled when transpileDependencies is true', async () => {
@@ -90,9 +98,9 @@ test('dep from node_modules should been transpiled when transpileDependencies is
     `module.exports = { transpileDependencies: true }`
   )
   await project.run('vue-cli-service build')
-  expect(await readVendorFile()).toMatch('return "__TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('return "__TEST__"')
 
-  expect(await readVendorFile()).toMatch('return "__SCOPE_TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('return "__SCOPE_TEST__"')
 })
 
 // https://github.com/vuejs/vue-cli/issues/3057
@@ -104,6 +112,24 @@ test('only transpile package with same name specified in transpileDependencies',
   try {
     await project.run('vue-cli-service build')
   } catch (e) {}
-  expect(await readVendorFile()).toMatch('() => "__TEST__"')
-  expect(await readVendorFile()).toMatch('() => "__SCOPE_TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('() => "__TEST__"')
+  expect(await readLegacyVendorFile()).toMatch('() => "__SCOPE_TEST__"')
+})
+
+test('when transpileDependencies is on, the module build should also include transpiled code (with a different target)', async () => {
+  await project.write(
+    'vue.config.js',
+    `module.exports = { transpileDependencies: true }`
+  )
+  await project.write(
+    'node_modules/external-dep/index.js',
+    `const test = (x) => x?.y?.z;\nexport default test`
+  )
+
+  await project.run('vue-cli-service build')
+  const file = await readVendorFile()
+  // module build won't need arrow function transformation
+  expect(file).toMatch('() => "__SCOPE_TEST__"')
+  // but still needs optional chaining transformation
+  expect(file).not.toMatch('x?.y?.z')
 })
diff --git a/packages/@vue/cli-service/__tests__/build.spec.js b/packages/@vue/cli-service/__tests__/build.spec.js
index c32e8bffa8..ce94962897 100644
--- a/packages/@vue/cli-service/__tests__/build.spec.js
+++ b/packages/@vue/cli-service/__tests__/build.spec.js
@@ -38,8 +38,8 @@ test('build', async () => {
   // expect(index).toMatch(/<link [^>]+app[^>]+\.css" rel="preload" as="style">/)
 
   // should inject scripts
-  expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors\.\w{8}\.js">/)
-  expect(index).toMatch(/<script defer="defer" src="\/js\/app\.\w{8}\.js">/)
+  expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors-legacy\.\w{8}\.js" nomodule>/)
+  expect(index).toMatch(/<script defer="defer" src="\/js\/app-legacy\.\w{8}\.js" nomodule>/)
   // should inject css
   expect(index).toMatch(/<link href="\/css\/app\.\w{8}\.css" rel="stylesheet">/)
 
diff --git a/packages/@vue/cli-service/__tests__/cors.spec.js b/packages/@vue/cli-service/__tests__/cors.spec.js
index 64dfd15f8d..481c39a6a7 100644
--- a/packages/@vue/cli-service/__tests__/cors.spec.js
+++ b/packages/@vue/cli-service/__tests__/cors.spec.js
@@ -30,8 +30,8 @@ test('build', async () => {
   // expect(index).toMatch(/<link [^>]+app[^>]+\.css rel=preload as=style crossorigin>/)
 
   // should apply crossorigin and add integrity to scripts and css
-  expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?">/)
-  expect(index).toMatch(/<script defer="defer" src="\/js\/app\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?">/)
+  expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?" type="module">/)
+  expect(index).toMatch(/<script defer="defer" src="\/js\/app\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?" type="module">/)
   expect(index).toMatch(/<link href="\/css\/app\.\w{8}\.css" rel="stylesheet" crossorigin integrity="sha384-.{64}\s?">/)
 
   // verify integrity is correct by actually running it
diff --git a/packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js b/packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js
index 56c63480e2..df2cacb11a 100644
--- a/packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js
+++ b/packages/@vue/cli-service/__tests__/cssPreprocessors.spec.js
@@ -1,4 +1,4 @@
-jest.setTimeout(30000)
+jest.setTimeout(300000)
 
 const create = require('@vue/cli-test-utils/createTestProject')
 const { defaultPreset } = require('@vue/cli/lib/options')
diff --git a/packages/@vue/cli-service/__tests__/modernMode.spec.js b/packages/@vue/cli-service/__tests__/modernMode.spec.js
index b74d9fec8f..1368838db9 100644
--- a/packages/@vue/cli-service/__tests__/modernMode.spec.js
+++ b/packages/@vue/cli-service/__tests__/modernMode.spec.js
@@ -12,7 +12,7 @@ let server, browser
 test('modern mode', async () => {
   const project = await create('modern-mode', defaultPreset)
 
-  const { stdout } = await project.run('vue-cli-service build --modern')
+  const { stdout } = await project.run('vue-cli-service build')
   expect(stdout).toMatch('Build complete.')
 
   // assert correct bundle files
@@ -43,13 +43,9 @@ test('modern mode', async () => {
   expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors-legacy\.\w{8}\.js" nomodule>/)
   expect(index).toMatch(/<script defer="defer" src="\/js\/app-legacy\.\w{8}\.js" nomodule>/)
 
-  // should inject Safari 10 nomodule fix
-  const { safariFix } = require('../lib/webpack/ModernModePlugin')
-  expect(index).toMatch(`<script>${safariFix}</script>`)
-
   // Test crossorigin="use-credentials"
   await project.write('vue.config.js', `module.exports = { crossorigin: 'use-credentials' }`)
-  const { stdout: stdout2 } = await project.run('vue-cli-service build --modern')
+  const { stdout: stdout2 } = await project.run('vue-cli-service build')
   expect(stdout2).toMatch('Build complete.')
   const index2 = await project.read('dist/index.html')
   // should use <script type="module" crossorigin="use-credentials"> for modern bundle
@@ -82,21 +78,58 @@ test('modern mode', async () => {
   expect(await getH1Text()).toMatch('Welcome to Your Vue.js App')
 })
 
-test('no-unsafe-inline', async () => {
-  const project = await create('no-unsafe-inline', defaultPreset)
+test('should not inject the nomodule-fix script if Safari 10 is not targeted', async () => {
+  // the default targets already excludes safari 10
+  const project = await create('skip-safari-fix', defaultPreset)
 
-  const { stdout } = await project.run('vue-cli-service build --modern --no-unsafe-inline')
+  const { stdout } = await project.run('vue-cli-service build')
   expect(stdout).toMatch('Build complete.')
 
+  // should contain no inline scripts in the output html
+  const index = await project.read('dist/index.html')
+  expect(index).not.toMatch(/[^>]\s*<\/script>/)
+  // should not contain the safari-nomodule-fix bundle, either
+  const files = await fs.readdir(path.join(project.dir, 'dist/js'))
+  expect(files.some(f => /^safari-nomodule-fix\.js$/.test(f))).toBe(false)
+})
+
+test('should inject nomodule-fix script when Safari 10 support is required', async () => {
+  const project = await create('safari-nomodule-fix', defaultPreset)
+
+  const pkg = JSON.parse(await project.read('package.json'))
+  pkg.browserslist.push('safari > 10')
+  await project.write('package.json', JSON.stringify(pkg, null, 2))
+
+  let { stdout } = await project.run('vue-cli-service build')
+  let index = await project.read('dist/index.html')
+  // should inject Safari 10 nomodule fix as an inline script
+  const { safariFix } = require('../lib/webpack/ModernModePlugin')
+  expect(index).toMatch(`<script>${safariFix}</script>`)
+
+  // `--no-unsafe-inline` option
+  stdout = (await project.run('vue-cli-service build --no-unsafe-inline')).stdout
+  expect(stdout).toMatch('Build complete.')
   // should output a separate safari-nomodule-fix bundle
   const files = await fs.readdir(path.join(project.dir, 'dist/js'))
   expect(files.some(f => /^safari-nomodule-fix\.js$/.test(f))).toBe(true)
-
   // should contain no inline scripts in the output html
-  const index = await project.read('dist/index.html')
+  index = await project.read('dist/index.html')
   expect(index).not.toMatch(/[^>]\s*<\/script>/)
 })
 
+test('--no-module', async () => {
+  const project = await create('no-module', defaultPreset)
+
+  const { stdout } = await project.run('vue-cli-service build --no-module')
+  expect(stdout).toMatch('Build complete.')
+
+  const index = await project.read('dist/index.html')
+  expect(index).not.toMatch('type="module"')
+
+  const files = await fs.readdir(path.join(project.dir, 'dist/js'))
+  expect(files.some(f => /-legacy.js/.test(f))).toBe(false)
+})
+
 afterAll(async () => {
   if (browser) {
     await browser.close()
diff --git a/packages/@vue/cli-service/__tests__/multiPage.spec.js b/packages/@vue/cli-service/__tests__/multiPage.spec.js
index 441fe07537..b055a24f85 100644
--- a/packages/@vue/cli-service/__tests__/multiPage.spec.js
+++ b/packages/@vue/cli-service/__tests__/multiPage.spec.js
@@ -110,14 +110,14 @@ test('build w/ multi page', async () => {
   const assertSharedAssets = file => {
     // should split and preload vendor chunk
     // expect(file).toMatch(/<link [^>]*js\/chunk-vendors[^>]*\.js" rel="preload" as="script">/)
-    expect(file).toMatch(/<script [^>]*src="\/js\/chunk-vendors\.\w+\.js">/)
+    expect(file).toMatch(/<script [^>]*src="\/js\/chunk-vendors\.\w+\.js" type="module">/)
   }
 
   const index = await project.read('dist/index.html')
   assertSharedAssets(index)
   // should split and preload common js and css
   // expect(index).toMatch(/<link [^>]*js\/chunk-common[^>]*\.js" rel="preload" as="script">/)
-  expect(index).toMatch(/<script [^>]*src="\/js\/chunk-common\.\w+\.js">/)
+  expect(index).toMatch(/<script [^>]*src="\/js\/chunk-common\.\w+\.js" type="module">/)
   expect(index).toMatch(/<link href="\/css\/chunk-common\.\w+\.css" rel="stylesheet">/)
   // expect(index).toMatch(/<link [^>]*chunk-common[^>]*\.css" rel="preload" as="style">/)
   // should preload correct page file
@@ -128,9 +128,9 @@ test('build w/ multi page', async () => {
   // expect(index).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
   // expect(index).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
   // should load correct page js
-  expect(index).toMatch(/<script [^>]*src="\/js\/index\.\w+\.js">/)
-  expect(index).not.toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js">/)
-  expect(index).not.toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js">/)
+  expect(index).toMatch(/<script [^>]*src="\/js\/index\.\w+\.js" type="module">/)
+  expect(index).not.toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js" type="module">/)
+  expect(index).not.toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js" type="module">/)
 
   const foo = await project.read('dist/foo.html')
   assertSharedAssets(foo)
@@ -143,9 +143,9 @@ test('build w/ multi page', async () => {
   // expect(foo).not.toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
   // expect(foo).not.toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
   // should load correct page js
-  expect(foo).not.toMatch(/<script [^>]*src="\/js\/index\.\w+\.js">/)
-  expect(foo).toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js">/)
-  expect(foo).not.toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js">/)
+  expect(foo).not.toMatch(/<script [^>]*src="\/js\/index\.\w+\.js" type="module">/)
+  expect(foo).toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js" type="module">/)
+  expect(foo).not.toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js" type="module">/)
 
   const bar = await project.read('dist/bar.html')
   assertSharedAssets(bar)
@@ -162,9 +162,9 @@ test('build w/ multi page', async () => {
   // expect(bar).toMatch(/<link [^>]*css\/chunk-\w+\.\w+\.css" rel="prefetch">/)
   // expect(bar).toMatch(/<link [^>]*js\/chunk-\w+\.\w+\.js" rel="prefetch">/)
   // should load correct page js
-  expect(bar).not.toMatch(/<script [^>]*src="\/js\/index\.\w+\.js">/)
-  expect(bar).not.toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js">/)
-  expect(bar).toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js">/)
+  expect(bar).not.toMatch(/<script [^>]*src="\/js\/index\.\w+\.js" type="module">/)
+  expect(bar).not.toMatch(/<script [^>]*src="\/js\/foo\.\w+\.js" type="module">/)
+  expect(bar).toMatch(/<script [^>]*src="\/js\/bar\.\w+\.js" type="module">/)
 
   // assert pages work
   const port = await portfinder.getPortPromise()
diff --git a/packages/@vue/cli-service/lib/commands/build/index.js b/packages/@vue/cli-service/lib/commands/build/index.js
index d749e7230d..fcad4278d8 100644
--- a/packages/@vue/cli-service/lib/commands/build/index.js
+++ b/packages/@vue/cli-service/lib/commands/build/index.js
@@ -1,6 +1,7 @@
 const defaults = {
   clean: true,
   target: 'app',
+  module: true,
   formats: 'commonjs,umd,umd-min',
   'unsafe-inline': true
 }
@@ -26,7 +27,7 @@ module.exports = (api, options) => {
     options: {
       '--mode': `specify env mode (default: production)`,
       '--dest': `specify output directory (default: ${options.outputDir})`,
-      '--modern': `build app targeting modern browsers with auto fallback`,
+      '--no-module': `build app without generating <script type="module"> chunks for modern browsers`,
       '--no-unsafe-inline': `build app without introducing inline scripts`,
       '--target': `app | lib | wc | wc-async (default: ${defaults.target})`,
       '--inline-vue': 'include the Vue module in the final bundle of library or web component target',
@@ -52,7 +53,7 @@ module.exports = (api, options) => {
     }
 
     process.env.VUE_CLI_BUILD_TARGET = args.target
-    if (args.modern && args.target === 'app') {
+    if (args.module && args.target === 'app') {
       process.env.VUE_CLI_MODERN_MODE = true
       if (!process.env.VUE_CLI_MODERN_BUILD) {
         // main-process for legacy build
@@ -78,14 +79,6 @@ module.exports = (api, options) => {
       }
       delete process.env.VUE_CLI_MODERN_MODE
     } else {
-      if (args.modern) {
-        const { warn } = require('@vue/cli-shared-utils')
-        warn(
-          `Modern mode only works with default target (app). ` +
-          `For libraries or web components, use the browserslist ` +
-          `config to specify target browsers.`
-        )
-      }
       await build(args, api, options)
     }
     delete process.env.VUE_CLI_BUILD_TARGET
@@ -110,7 +103,7 @@ async function build (args, api, options) {
   log()
   const mode = api.service.mode
   if (args.target === 'app') {
-    const bundleTag = args.modern
+    const bundleTag = args.module
       ? args.modernBuild
         ? `modern bundle `
         : `legacy bundle `
@@ -132,7 +125,7 @@ async function build (args, api, options) {
   }
 
   const targetDir = api.resolve(options.outputDir)
-  const isLegacyBuild = args.target === 'app' && args.modern && !args.modernBuild
+  const isLegacyBuild = args.target === 'app' && args.module && !args.modernBuild
 
   // resolve raw webpack config
   let webpackConfig
diff --git a/packages/@vue/cli-service/lib/commands/build/resolveAppConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveAppConfig.js
index d073f6ddd6..b8f518af4c 100644
--- a/packages/@vue/cli-service/lib/commands/build/resolveAppConfig.js
+++ b/packages/@vue/cli-service/lib/commands/build/resolveAppConfig.js
@@ -17,7 +17,7 @@ module.exports = (api, args, options) => {
     })
   }
 
-  if (args.modern) {
+  if (args.module) {
     const ModernModePlugin = require('../../webpack/ModernModePlugin')
     if (!args.modernBuild) {
       // Inject plugin to extract build stats and write to disk
diff --git a/packages/@vue/cli-service/lib/util/targets.js b/packages/@vue/cli-service/lib/util/targets.js
new file mode 100644
index 0000000000..bd2ce6b20c
--- /dev/null
+++ b/packages/@vue/cli-service/lib/util/targets.js
@@ -0,0 +1,50 @@
+// copied from @vue/babel-preset-app
+
+const { semver } = require('@vue/cli-shared-utils')
+const { default: getTargets } = require('@babel/helper-compilation-targets')
+
+const allModernTargets = getTargets(
+  { esmodules: true },
+  { ignoreBrowserslistConfig: true }
+)
+
+function getIntersectionTargets (targets, constraintTargets) {
+  const intersection = Object.keys(constraintTargets).reduce(
+    (results, browser) => {
+      // exclude the browsers that the user does not need
+      if (!targets[browser]) {
+        return results
+      }
+
+      // if the user-specified version is higher the minimum version that supports esmodule, than use it
+      results[browser] = semver.gt(
+        semver.coerce(constraintTargets[browser]),
+        semver.coerce(targets[browser])
+      )
+        ? constraintTargets[browser]
+        : targets[browser]
+
+      return results
+    },
+    {}
+  )
+
+  return intersection
+}
+
+function getModernTargets (targets) {
+  // use the intersection of modern mode browsers and user defined targets config
+  return getIntersectionTargets(targets, allModernTargets)
+}
+
+const projectTargets = getTargets()
+const projectModernTargets = getModernTargets(projectTargets)
+
+module.exports = {
+  getTargets,
+  getModernTargets,
+  getIntersectionTargets,
+
+  projectTargets,
+  projectModernTargets
+}
diff --git a/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js b/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js
index 3e3d3a7b44..180143465c 100644
--- a/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js
+++ b/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js
@@ -2,6 +2,16 @@ const fs = require('fs-extra')
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 
+const { semver } = require('@vue/cli-shared-utils')
+const { projectModernTargets } = require('../util/targets')
+
+const minSafariVersion = projectModernTargets.safari
+const minIOSVersion = projectModernTargets.ios
+const supportsSafari10 =
+  (minSafariVersion && semver.lt(semver.coerce(minSafariVersion), '11.0.0')) ||
+  (minIOSVersion && semver.lt(semver.coerce(minIOSVersion), '11.0.0'))
+const needsSafariFix = supportsSafari10
+
 // https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
 const safariFix = `!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();`
 
@@ -77,32 +87,34 @@ class ModernModePlugin {
           .filter(a => a.tagName === 'script' && a.attributes)
         legacyAssets.forEach(a => { a.attributes.nomodule = '' })
 
-        if (this.unsafeInline) {
-          // inject inline Safari 10 nomodule fix
-          tags.push({
-            tagName: 'script',
-            closeTag: true,
-            innerHTML: safariFix
-          })
-        } else {
-          // inject the fix as an external script
-          const safariFixPath = path.join(this.jsDirectory, 'safari-nomodule-fix.js')
-          const fullSafariFixPath = path.join(compilation.options.output.publicPath, safariFixPath)
-          compilation.assets[safariFixPath] = {
-            source: function () {
-              return Buffer.from(safariFix)
-            },
-            size: function () {
-              return Buffer.byteLength(safariFix)
+        if (needsSafariFix) {
+          if (this.unsafeInline) {
+            // inject inline Safari 10 nomodule fix
+            tags.push({
+              tagName: 'script',
+              closeTag: true,
+              innerHTML: safariFix
+            })
+          } else {
+            // inject the fix as an external script
+            const safariFixPath = path.join(this.jsDirectory, 'safari-nomodule-fix.js')
+            const fullSafariFixPath = path.join(compilation.options.output.publicPath, safariFixPath)
+            compilation.assets[safariFixPath] = {
+              source: function () {
+                return Buffer.from(safariFix)
+              },
+              size: function () {
+                return Buffer.byteLength(safariFix)
+              }
             }
+            tags.push({
+              tagName: 'script',
+              closeTag: true,
+              attributes: {
+                src: fullSafariFixPath
+              }
+            })
           }
-          tags.push({
-            tagName: 'script',
-            closeTag: true,
-            attributes: {
-              src: fullSafariFixPath
-            }
-          })
         }
 
         tags.push(...legacyAssets)
diff --git a/packages/@vue/cli-service/package.json b/packages/@vue/cli-service/package.json
index 42ac1247fa..0383b2cc3e 100644
--- a/packages/@vue/cli-service/package.json
+++ b/packages/@vue/cli-service/package.json
@@ -23,6 +23,7 @@
   },
   "homepage": "https://cli.vuejs.org/",
   "dependencies": {
+    "@babel/helper-compilation-targets": "^7.12.16",
     "@soda/friendly-errors-webpack-plugin": "^1.8.0",
     "@soda/get-current-script": "^1.0.2",
     "@types/minimist": "^1.2.0",
diff --git a/packages/@vue/cli-ui/src/components/content/TerminalView.vue b/packages/@vue/cli-ui/src/components/content/TerminalView.vue
index 1b170d5568..61c697c81a 100644
--- a/packages/@vue/cli-ui/src/components/content/TerminalView.vue
+++ b/packages/@vue/cli-ui/src/components/content/TerminalView.vue
@@ -173,8 +173,8 @@ export default {
 
       term.open(this.$refs.render)
 
-      term.onBlur(() => this.$emit('blur'))
-      term.onFocus(() => this.$emit('focus'))
+      term.element.addEventListener('blur', () => this.$emit('blur'))
+      term.element.addEventListener('focus', () => this.$emit('focus'))
 
       if (this.autoSize) {
         this.$nextTick(this.fit)
diff --git a/packages/@vue/cli-ui/ui-defaults/tasks.js b/packages/@vue/cli-ui/ui-defaults/tasks.js
index 9e7fe0098f..f349078d84 100644
--- a/packages/@vue/cli-ui/ui-defaults/tasks.js
+++ b/packages/@vue/cli-ui/ui-defaults/tasks.js
@@ -1,5 +1,6 @@
 const path = require('path')
 const fs = require('fs-extra')
+const { loadModule, semver } = require('@vue/cli-shared-utils')
 const { processStats } = require('./utils/stats')
 
 /** @typedef {import('../apollo-server/api/PluginApi')} PluginApi */
@@ -326,7 +327,17 @@ module.exports = api => {
       if (answers.target) args.push('--target', answers.target)
       if (answers.name) args.push('--name', answers.name)
       if (answers.watch) args.push('--watch')
-      if (answers.modern) args.push('--modern')
+
+      // the flag is different between v3/4 and v5 projects
+      const servicePkg = loadModule('@vue/cli-service/package.json', api.getCwd())
+      const isV5Project = servicePkg && semver.satisfies(servicePkg.version, '^5.0.0-0')
+
+      if (answers.modern) {
+        args.push(isV5Project ? '--module' : '--modern')
+      } else {
+        args.push(isV5Project ? '--no-module' : '--no-modern')
+      }
+
       setSharedData('modern-mode', !!answers.modern)
       args.push('--dashboard')