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

成功解决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