vue3.0项目优化打包体积引入CDN，项目报错，请问有人知道原因吗

vue.config.js

 // cdn
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      vant: 'vant',
      axiox: 'axios',
      vconsole: 'VConsole',
      // 'vue-i18n': 'VueI18n'
    },

js

//单独把vue实例提取出来，供其他js文件使用，暂未找到其他更好的办法
import { createApp } from 'vue'
import App from '../App.vue'
const app = createApp(App)
export default app

main.js

//vue实例单独提取到了app.js文件中
import app from './utils/app'
import router from './router'
import store from './store'
// 引入i18n多语言处理
import VueI18n from './language'
// 引入vconsole
import './utils/vconsole.js'
// 引入公共js
import Common from './utils/common.js';
import native from '@/utils/native.js';
// 引入初始化css
import './style/reset.css'
// 引入vant
import './utils/vant'
// vue适配rem、vant需要用到postcss-pxtorem、amfe-flexible；postcss-pxtorem要装5.1.1版本
import 'amfe-flexible/index.js'
//注册公共js方法
app.config.globalProperties.$common = Common

app.use(store).use(router).use(VueI18n).mount('#app')

html

<!-- CDN -->
    <script src="https://unpkg.com/vue@3.0.0"></script>
    <script src="https://unpkg.com/vue-router@4.0.0"></script>
    <script src="https://unpkg.com/vuex@4.0.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vconsole@3.8.1/dist/vconsole.min.js"></script>
    <!-- <script src="https://unpkg.com/vue-i18n@9.1.6/dist/vue-i18n.global.js"></script> -->

报错

看起来是reouter里的错 。你看看这三个警告。router.js

 
 // cdn
    externals: {
      vue: 'Vue',
      vue-router: 'VueRouter',
      vuex: 'Vuex',
      vant: 'vant',
      axiox: 'axios',
      vconsole: 'VConsole',
      // 'vue-i18n': 'VueI18n'
    },

这样试一下