htm下的script使用import引入js报错

最新推荐文章于 2025-06-15 17:12:31 发布
最新推荐文章于 2025-06-15 17:12:31 发布
阅读量1.6w 收藏 6
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/A13330069275/article/details/84849925
本文介绍如何将script标签的type属性更改为module，实现模块化导入JS文件，提高代码组织效率。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

将 script标签的type改成

<script type="module">


<script type="module">
   import './yourJSModule'
</script >

 

vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！
高级前端工程师
05-30 1万+
vue3，vite，build，打包编译，vite打包后页面白屏，index.html，dist，跨域，CORS报错，图片不显示，资源js加载出错，部署服务器后打开，页面空白，网页不显示，浏览器控制台，全是报错，vite+vue3执行build打包后index.html无法打开怎么办，打不开咋办，啥也不显示，index.html打开空白，打开cors跨域怎么解决，网页上线后一刷新就报错，上线后，typescript，ts，404-Page Not Found，vite build后访问报错，Vite+Vue
script引入失败问题
白石一文二的博客
03-31 882
详情可点击下面链接 script黄线警告 引入失败 这里的情况是当时 ssm+layui 引入时搜索的 出现的问题还有一种可能是 springmvc.xml 配置文件 未引入过滤器 <!--过滤静态资源--> <mvc:resources mapping="/layui/**" location="WEB-INF/layui/"/> 仔细观察路径 这里静态资...
script引入、import引入
weixin_42076997的博客
03-12 1407
script引入与import引入的区别
JavaScript全面介绍与代码示例
m0_74178187的博客
06-15 1116
JavaScript是一门功能强大、应用广泛的编程语言，从基础的语法到高级特性，再到不断发展的新特性，都为开发者提供了丰富的工具和可能性。无论是网页开发、移动应用开发、游戏开发还是其他领域，JavaScript都发挥着重要的作用。通过不断学习和实践，开发者可以更好地掌握JavaScript，开发出更加优秀的应用程序。希望本文能够帮助你对JavaScript有更深入的了解，开启你的JavaScript之旅。
通过import引入js文件提示错误
热门推荐
jigetage的专栏
04-15 1万+
在js文件中通过import引入另外的js文件，提示Uncaught SyntaxError: Unexpected string，或者Uncaught SyntaxError: Unexpected identifier错误，原因是import属于es6的语法，但是浏览器不支持es6语法，所以需要转换。 转换方法： 1，用 babel 把 import 转成 CommonJS 或者 AMD，...
在typescript中导入第三方类库import报错
weixin_34049032的博客
10-19 4654
问题 最近开始折腾typescript，在使用第三方类库，比如最常见的lodash，采用常规方法导入 import * as _ from 'lodash' vscode中报错提示lodash不是module。 原因 因为第三方类库并没有ts的声明文件，查阅网上资料，有typings和@types两种声明方式，typings使用起来很繁...
在HTML中引入JavaScript
patermenkey
04-29 1377
引入JavaScript的两种方法 引入JavaScript主要又两种方法，者两种方法都需要使用到<script>标签。这个标签最早由Netscape Navigator创造，不过早已成为了HTML正式规范。 在页面中嵌入JavaScript代码 <html lang="en"> <head> <meta charset="UTF-8"&g...
Vue引入echarts报错Error in mounted hook: “TypeError: Cannot read property ‘getAttribute‘ of null“
weixin_36106791的博客
07-15 2974
问题出现场景 今天在vue中引入echarts时，运行报错 [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'getAttribute' of null】 ## 问题排查 在运行Vue项目时出现了上述错误，出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的，代码如下： var myChart = echarts.init(this.$refs.map)
使用promise处理vue中引入的js加载先后问题
weixin_41700532的博客
07-24 1779
最近在开发工作流，也不能说开发吧，公司有一套工作流的代码，我只是个搬运工，转化为vue项目！不得不说，真不容易，原谅我曾经的年少无知，竟然在技术总监面前，夸下海口说这个简单（搬代码嘛）！ 开始把html拷贝到自己创建的flow.vue页面，把css丢到assets文件夹下，js丢到static文件夹下，然后麻烦点来了，js怎么引入； export暴露出来然后import引入？index.htm...
详解vue项目中调用百度地图API使用方法
10-17
注意，由于`BMap_Symbol_SHAPE_POINT`使用了下划线，Vue可能会报错，因此需要手动引入并转换命名： ```javascript import BMap from 'BMap'; import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'; ``` **...
C:\源码\04HTM5简介与基础骨架\Ego商城后台管理系统\my-app\server>node index.js file:///C:/%E6%BA%90%E7%A0%81/04HTM5%E7%AE%80%E4%BB%8B%E4%B8%8E%E5%9F%BA%E7%A1%80%E9%AA%A8%E6%9E%B6/Ego%E5%95%86%E5%9F%8E%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9F/my-app/server/index.js:1 const express = require("express"); ^ ReferenceError: require is not defined in ES module scope, you can use import instead This file is being treated as an ES module because it has a '.js' file extension and 'C:\源码\04HTM5简介与基础骨架\Ego商城后台管理系统\my-app\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension. at file:///C:/%E6%BA%90%E7%A0%81/04HTM5%E7%AE%80%E4%BB%8B%E4%B8%8E%E5%9F%BA%E7%A1%80%E9%AA%Arver/index.js:1:17 at ModuleJob.run (node:internal/modules/esm/module_job:271:25) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:578:26) at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:116:5) Node.js v22.14.0
最新发布
07-15
- 在 Node.js 中，有两种模块系统：CommonJS (使用 require) 和 ES 模块 (使用 import/export)。 - 从 Node.js v12 开始支持 ES 模块，但需要满足以下条件之一： a) 文件扩展名为 .mjs b) 最近的父级 package....
HTML Imports
mychirs的专栏
09-15 4417
为什么需要导入？ 先想想你在 web 上是如何加载不同类型的资源。对于 JS，我们有 。 应该是 CSS 的首选。图片可以用 。视频则有 。音频，…… 你明白我在说什么了吧！ web 上绝大部分的内容都有简单明了的加载方式。可对于 HTML 呢？下面是可选的几种方案：  - 可用但笨重。iframe 中的内容全部存在于一个不同于当前页的独立上下文中。这是个很棒的特性，但也为开发
解决： 在使用vue的.html文件的script标签中，引入import模块化js文件。
qq_38969618的博客
02-14 7977
现代浏览器支持用script标签引入模块或脚本，如果要引入模块，在script标签中需添加type="module"，如果引入脚本，则不需要type。 <script type="module" src="xxx.js"> // 模块a.js export default { ... } // 页面test.html <!-- 如果使用模块化语句如import、export等，script元素必须添加type=module --> <script type="
浅谈script，link，import，@import引入
weixin_49295874的博客
02-25 4077
1.script，link是html标签，script可以引入js,即可调用引入js里面的方法，link标签可以引入css样式图片。4.可操作性:link可以通过js操作dom（盗墓 文档对象模型）插入link标签改变样式，而@import不能。2.import是tp语法，可以引入js也可引入css。3.兼容性:link（是标签）没有兼容问题，@import不兼容ie5以下的浏览器.1.从属关系:link是html标签，@import是css提供的.链接式和导入式有什么区别（链接式，导入式，内嵌式，行内）
使用es6中import和export报错
qq_42535651的博客
02-07 2269
在学习import和export时，写了一个小demo进行测试 //index.html <script> import test from './test.js' test() </script> //test.js export default function (){ console.log('调用了test.js里的export函数了哦') } 可是会报错CO...
一篇文章弄懂 JavaScript 中的 import
weixin_34149796的博客
12-07 862
import 语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode，导入的模块都运行在严格模式下。import语句不能在嵌入式脚本中使用。 语法 import defaultExport from “module-name”; import * as name from “module-name”; import { export } from “module-name”; ...
在html静态页面中用import导入js文件
ffdals的博客
03-29 1213
在html静态页面中用import导入js文件 前提是js文件是一个模块。有时可能读不到 是加载时机的问题 笨办法是加定时器 聪明办法还没找到。
JavaScript语法特性篇-动态导入 import()
weixin_43303603的博客
06-24 3561
动态导入import 使用场景及如何使用
非框架 js引用写法
蜗牛在奔跑的博客
02-23 772
1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <tit.
vue3使用import.meta报错
12-27
### Vue3 使用 `import.meta` 遇到的常见错误及其解决方案 #### 错误一：`import.meta.glob()` 只能接受字符串字面量 当尝试动态传递参数给 `import.meta.glob()` 函数时会触发此错误。该函数设计上仅支持静态路径模式作为输入。 对于这种情况，推荐的做法是在调用处直接写入具体的文件匹配模式而非变量[^1]： ```javascript // 正确做法 const modules = import.meta.glob('./modules/*.js'); // 不要这样做 let pathPattern = './modules/*.js'; const modules = import.meta.glob(pathPattern); // 这样会导致编译失败 ``` 如果确实需要基于某些条件改变导入范围，则可以考虑构建多个固定的 glob 表达式并分别处理它们的结果。 #### 错误二：无法识别 `import.meta.env` 环境变量 在生产环境中部署应用后可能会遇到读取不到预期环境配置的情况。这通常是因为缺少必要的 TypeScript 类型声明或是 Webpack/Vite 插件未正确加载所致[^2]。 为了确保能够顺利访问这些全局属性，在项目的根目录下的 `tsconfig.json` 文件内添加如下设置即可解决问题: ```json { "compilerOptions": { ... "types": ["vite/client"] } } ``` 另外还需确认 `.env*` 文件里的键名遵循特定命名约定（如以 VITE_ 开头），以便让工具链知道哪些应该被暴露出去供前端代码使用。 #### 错误三：“不能在模块外部使用 'import.meta'” 这个提示往往意味着当前 JavaScript/TypeScript 脚本并非按照 ES Module 方式执行。检查 HTML 文档中的 `<script>` 标签是否有 `type="module"` 属性；如果没有的话加上它就能修复上述异常状况了[^3]。 ```html <script type="module"> console.log(import.meta); </script> ``` 同时也要留意服务器端渲染(SSR)场景下可能存在的兼容性挑战——因为 Node.js 默认并不理解这种语法结构。此时或许得借助额外的转换工具或者调整框架本身的设定来绕过障碍。 #### 错误四:`import.meta.globEager is not function` 更新至最新版库之后出现了此类警告？那可能是由于所使用的 API 已经发生了变更。查阅官方文档得知从某个版本起已废弃掉 eager 形式的批量加载方式而改用了懒加载策略[^4]。 针对这一变化作出相应修改就不再会有类似的告警信息弹出了： ```diff - const components = import.meta.globEager('/src/components/**/*.vue'); + const componentPromises = Object.values( + import.meta.glob('/src/components/**/*.vue', {eager: true}) + ); ``` 以上就是关于 Vue3 结合 Vite 构建的应用程序里几个典型的与 `import.meta` 相关的问题以及对应的解决办法概述。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值