import.meta 在 type="module" 的外部脚本中可用，但内联模块脚本不支持；其 import.meta.url 返回绝对 url，可用于可靠解析相对路径，且无法 polyfill。
import.meta 在 type="module" 脚本中是否可用
可用，但仅限于 <script type="module"></script> 内部，且必须是 ES 模块上下文 —— 浏览器原生支持（Chrome 63+、Firefox 62+、Safari 13.1+），Node.js 中需配合 .mjs 或 "type": "module"。非模块脚本（如 type="text/javascript" 或无 type）里访问 import.meta 会直接报 ReferenceError: import.meta is not defined。
import.meta.url 的典型用法和路径行为
这是最常用属性，返回当前模块的完整 URL（含协议、域名、路径、查询参数）。它不是字符串字面量，而是运行时解析的真实地址，对动态加载、资源定位很关键：
-
import.meta.url总是绝对 URL，即使你在本地file://协议下打开 HTML，它也会是类似file:///path/to/script.js的形式 - 不能用
new URL('./assets/icon.png', import.meta.url)正确解析相对路径 —— 这是推荐做法，比拼接字符串更可靠 - 在构建工具（如 Vite、Webpack）中，
import.meta.url仍指向原始源文件位置，不是打包后产物路径；若需构建后路径，得配合import.meta.env或构建时注入变量
常见错误：在内联 <script type="module"></script> 中使用 import.meta
不行。HTML 内联模块脚本（即写在 <script type="module">...</script> 标签里的代码）没有 import.meta —— 浏览器规范明确要求 import.meta 只对**外部模块脚本**（src 属性加载的 JS 文件）有效。以下写法会报错：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<script type="module"> console.log(import.meta.url); // TypeError: Cannot access 'import.meta' on non-module script </script>
解决办法只有两个：
- 把逻辑拆到外部文件，用
<script type="module" src="main.js"></script> - 改用
document.currentScript（不推荐，兼容性差且不可靠）或通过其他方式传递上下文
构建环境与 import.meta 的兼容性注意点
Rollup、Vite 默认保留 import.meta 并做正确处理；Webpack 5+ 支持，但 Webpack 4 及更早版本默认移除或报错。如果看到 import.meta is not defined 且确认用了 type="module"，先检查：
- 是否误将模块脚本当作普通脚本引入（漏了
type="module"） - 是否在构建配置中禁用了模块支持（如 Webpack 的
experiments.outputModule = false） - 是否用了旧版 Babel 插件（如
@babel/plugin-transform-modules-commonjs）把模块转成了 CommonJS，导致import.meta被丢弃
真正容易被忽略的是：import.meta 是语法级特性，不能靠 polyfill 补 —— 它要么原生支持，要么彻底不可用。开发时别只测 Chrome，务必在目标最低浏览器版本中验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
