首页 前端知识 成功解决Uncaught TypeError: Failed to resolve module specifier “vue“.

成功解决Uncaught TypeError: Failed to resolve module specifier “vue“.

2024-06-01 10:06:10 前端知识 前端哥 323 112 我要收藏

成功解决Uncaught TypeError: Failed to resolve module specifier “vue”.

一、问题背景

	俗话说,温故而知新。
	首先,非常感谢我许哥,教会了我网页相关的知识,其他方面我也受益良多。
	言归正传,最近由于要运行Python,下载了PyStorm。工作之余,想到PyStorm也能开发js,于是准备写一个简单的网页练练手。
    1. 打开PyStorm,创建Vue项目

在这里插入图片描述

    1. 运行

在这里插入图片描述

    1. 报错:
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

四、其他

	匆匆写就,抛砖引玉。
转载请注明出处或者链接地址:https://www.qianduange.cn//article/10415.html
标签
评论
发布的文章

npmjs官网(查询依赖包)

2024-06-07 00:06:56

npx使用及原理

2024-06-07 00:06:36

npm 包管理工具

2024-06-07 00:06:33

vue 思极地图开发

2024-06-07 00:06:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!