Vue.js版本查询程序显示空白页，控制台提示Vue未定义

为什么会出现"Vue is not defined"？ #

你引入的https://unpkg.com/vue@next是Vue 3的ESM（ES模块）版本，这个版本不会自动将Vue挂载到全局window对象上，所以你的脚本里找不到全局的Vue变量。另外，CMD里执行vue --version显示的是Vue CLI的版本，这和浏览器中使用的Vue运行时库是两个完全不同的东西——CLI是项目构建工具，不影响浏览器端的代码运行。

两种解决办法 #

• 方案一：改用Vue 3的UMD版本（支持全局变量）
  替换script标签的src为UMD分发版本，这个版本会自动把Vue挂载到window上，就能直接全局调用了：

  <html>
   <head>
   <meta charset="utf-8" />
   <script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>
   </head>
   <body>
   </body>
   
   <script>
   alert(`Vue.version = ${Vue.version}`);
    </script>
  </html>
  

• 方案二：用ES模块方式引入
  保留ESM版本，但给脚本标签加上type="module"，然后通过import语法获取版本号：

  <html>
   <head>
   <meta charset="utf-8" />
   </head>
   <body>
   </body>
   
   <script type="module">
   import { version } from 'https://unpkg.com/vue@next/dist/vue.esm-browser.js';
   alert(`Vue.version = ${version}`);
   </script>
  </html>
  

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