CDN方式使用VueJS 3 + vue-router时报createRouter未定义错误求解

错误原因整理 #

• Vue Router 4 以CDN形式引入时，所有API都挂载在全局VueRouter对象下，无法直接调用createRouter、createWebHistory，需要通过VueRouter.xxx的形式调用
• createRouter是工厂函数，不需要加new关键字实例化
• CDN环境不存在process.env.BASE_URL变量，无特殊路由前缀配置直接传空字符串即可
• 路由实例创建完成后，需要调用app.use(router)挂载到Vue实例上才能生效

修复后的完整可运行代码 #

<!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">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@4"></script>


    <div id="app">
        <h1>{{ mess }}</h1>

        <!-- i links -->
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
        <router-link to="/portfolio">Portfolio</router-link>
        <router-link to="/contatti">Contatti</router-link>

        <!-- contenitore per il HTML -->
        <router-view></router-view>
    </div>
    
    <script>

        let app = Vue.createApp({
            data() {
                return {
                    mess: "ciao mondo"
                }
            }
        });

        const Home = { template: `<h1>Contenuto Home</h1>` };
        const About = { template: `<h1>Contenuto About</h1>` };
        const Portfolio = { template: `<h1>Contenuto Portfolio</h1>` };
        const Contatti = { template: `<h1>Contenuto Contatti</h1>` };

        const routes = [
            { path: "/", component: Home },
            { path: "/about", component: About },
            { path: "/portfolio", component: Portfolio },
            { path: "/contatti", component: Contatti }
        ];

        const router = VueRouter.createRouter({
            history: VueRouter.createWebHistory(''),
            routes
        });

        app.use(router);
        app.mount("#app");
        
    </script>

</body>
</html>

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