Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start wi-CodePudding

I want to get the simplest version of a vuejs Hello World using individual files. I am setting up the project like so: create index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
</body>
</html>

create create ./src/main.js:

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount("#app")

create ./src/App.vue:

<template>
    Hello World
</template>

Run npm init --yes in terminal followed by npm install vue@latest, so package.json:

{
  "name": "vueintro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.2.31"
  }
}

Going to http://localhost, I get a blank page with inspect/console giving the error: Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”.. I have tried importing ../node_modules/vue and using importmap but they all just throw errors.

CodePudding user response：

That won't work in the browser, since it expects a URL to a file to be able to import a module. You need to either use a bundler/build tool of some kind, I recommend https://vitejs.dev/ Alternatively you can use https://vuejs.org/guide/quick-start.html#without-build-tools , make sure to map to exact file vue.esm-browser.js not just vue