CDN引入Vue3+vue-router@4报VueRouter is not a constructor解决

两个报错都是写法和引入的依赖版本不匹配导致的：

• 你引入的是Vue3 + Vue Router 4的CDN资源，但代码用的是Vue2 + Vue Router 3的旧语法：Vue Router4不再是构造函数，不能用new VueRouter()初始化，Vue3也不再支持new Vue()创建实例
• 普通script标签默认不是ES模块环境，直接写import语法必然报错，完全不需要加这两行代码，也不用折腾任何模块打包配置。

不需要调整index.html里的CDN引入顺序，只需要修改app.js的代码即可，删掉你加的import相关代码，替换为以下内容：

const routes = [
    {path:'/home', component:home},
    {path:'/department', component:department},
    {path:'/employee', component:employee}
]

// 创建路由实例，适配Vue Router4 CDN写法
const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(), // CDN场景优先用hash模式，无需服务端额外配置
    routes
})

// 创建Vue3应用实例，挂载路由
const app = Vue.createApp({})
app.use(router)
app.mount('#app')

如果你的home.js/department.js/employee.js里的组件还是Vue2写法，也要同步改成Vue3的CDN写法，示例：

// 以home.js为例，其他组件同理
const home = Vue.defineComponent({
    template: `
        <div>
            <!-- 你的首页组件模板内容 -->
        </div>
    `,
    setup() {
        // 组件逻辑写在这里
        return {}
    }
})

提示：CDN引入模式下，所有Vue和Vue Router的API都直接从全局对象Vue、VueRouter上获取即可，不需要写任何import语句。

内容的提问来源于stack exchange，提问作者Edward Glapthorn