成功解决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-cli
2)如果上面命名报以下错,则需要去官网安装Node.js( https://nodejs.org/en/ ),下载安装即可 :
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
3)初始化Vue包,使用命令(my_project为当前项目名):vue init webpack my_project
4)执行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
四、其他
匆匆写就,抛砖引玉。