Vue + typescript project ts will report an error when vue vue-router vuex is introduced with cdn

Project builds
public/index.html

for vue-cli 3.0
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title></title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://unpkg.com/highlight.js/styles/solarized-light.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.4/lib/index.css">
  </head>
  <body>
    <noscript>
      <strong>We"re sorry but blog-pwa doesn"t work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.min.js"></script>
    <script src="https://unpkg.com/vuex@2.2.1/dist/vuex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@1.4/lib/vant.min.js"></script>
    <script src="https://unpkg.com/highlight.js@9.12.0/lib/highlight.js"></script>
    
    <!-- built files will be auto injected -->
  </body>
</html>

vue.config.js

externals: {
    "vue": "Vue",
    "vuex": "Vuex",
    "vue-router": "VueRouter",
    "vant": "vant"
}

but the project keeps reporting that the module cannot be found
such as

clipboard.png

Dec.22,2021
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1c251c1-33722.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1c251c1-33722.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?