fix(build): demo-lib.html Vue 3 compatibility (#6366)

jeneser · web-flow · commit 20355435e7b0 · 2021-03-22T16:07:18.000+08:00
diff --git a/packages/@vue/cli-service/lib/commands/build/demo-lib.html b/packages/@vue/cli-service/lib/commands/build/demo-lib.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title><%- htmlWebpackPlugin.options.libName %> demo</title>
-<script src="https://unpkg.com/vue"></script>
+<script src="//unpkg.com/vue@<%- htmlWebpackPlugin.options.vueMajor %>"></script>
 <script src="./<%- htmlWebpackPlugin.options.assetsFileName %>.umd.js"></script>
 <% if (htmlWebpackPlugin.options.cssExtract) { %>
 <link rel="stylesheet" href="./<%- htmlWebpackPlugin.options.assetsFileName %>.css">
@@ -12,9 +12,17 @@
 </div>
 
 <script>
+<% if (htmlWebpackPlugin.options.vueMajor === 3) { %>
+Vue.createApp({
+  components: {
+    demo: <%- htmlWebpackPlugin.options.libName %>
+  }
+}).mount('#app')
+<% } else { %>
 new Vue({
   components: {
     demo: <%- htmlWebpackPlugin.options.libName %>
   }
 }).$mount('#app')
+<% } %>
 </script>
diff --git a/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveLibConfig.js
@@ -9,6 +9,8 @@ module.exports = (api, { entry, name, formats, filename, 'inline-vue': inlineVue
     process.exit(1)
   }
 
+  const vueMajor = require('../../util/getVueMajor')(api.getCwd())
+
   const fullEntryPath = api.resolve(entry)
 
   if (!fs.existsSync(fullEntryPath)) {
@@ -66,6 +68,7 @@ module.exports = (api, { entry, name, formats, filename, 'inline-vue': inlineVue
             inject: false,
             filename: 'demo.html',
             libName,
+            vueMajor,
             assetsFileName: filename,
             cssExtract: config.plugins.has('extract-css')
           }])
