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

Author: jeneser

packages/@vue/cli-service/lib/commands/build/demo-lib.html

@@ -1,6 +1,6 @@
 <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">
@@ -11,9 +11,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>

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')
           }])