成功解决Uncaught TypeError: Failed to resolve module specifier “vue”.
一、问题背景
俗话说，温故而知新。首先，非常感谢我许哥，教会了我网页相关的知识，其他方面我也受益良多。言归正传，最近由于要运行Python，下载了PyStorm。工作之余，想到PyStorm也能开发js，于是准备写一个简单的网页练练手。
-
- 打开PyStorm，创建Vue项目
-
- 运行
-
- 报错：
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
二、解决方案
1、方案一（推荐）1）安装Vue，使用命令: npm install -g vue-cli2）如果上面命名报以下错，则需要去官网安装Node.js（ https://nodejs.org/en/ ），下载安装即可 ：npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。3）初始化Vue包，使用命令（my_project为当前项目名）：vue init webpack my_project4）执行npm run dev、npm run build、npm run preview（如下图，依次运行）5) 如果上述步骤提示如下错误，则输入命令npm intall vue：'vite' 不是内部或外部命令，也不是可运行的程序或批处理文件。 6) 如果成功，则控制台会输出一个本地链接，例如我的是：http://localhost:4173/
1、方案二1）使用importmap的方式引入Vue，示例（替换index.html中的内容）：
<html>
<body class="app"><script type="importmap">{ "imports": {"vue": "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.41/vue.esm-browser.prod.js","vue-router": "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.1.5/vue-router.esm-browser.min.js","@vue/devtools-api": "https://unpkg.com/@vue/devtools-api@6.4.5/lib/esm/index.js"} }
</script><script type="module">import { createRouter, createWebHistory } from 'vue-router'import { createApp } from 'vue'const app = createApp({ template: 'Hello world.' })const router = createRouter({routes: [{ path: '/:pathMatch(.*)*', component: app }],history: createWebHistory()})app.use(router)document.addEventListener('DOMContentLoaded', () => app.mount('.app'));
</script></body>
</html>
三、技术参考
1、 https://stackoverflow.com/questions/52612446/importing-a-package-in-es6-failed-to-resolve-module-specifier-vue importing a package in ES6: "Failed to resolve module specifier "vue""2、 https://blog.csdn.net/zbl744949461/article/details/110039452 从零开始搭建vue项目 （晋级篇） npm run dev npm run build
四、其他
匆匆写就，抛砖引玉。
