将外部 js 添加到 Vue CLI 时出现 Mime 类型错误

Posted 2023-02-23

【中文标题】将外部 js 添加到 Vue CLI 时出现 Mime 类型错误

【英文标题】：Mime type error when adding external js to Vue CLI

【发布时间】：2018-10-22 22:01:13

【问题描述】：

我正在尝试将外部 JS 或 CSS 文件添加到 Vue CLI 我已经用 Webpack Simple 安装了 Bootstrap Vue

所以我尝试在 index.html 中添加一个包含简单数组的简单 JS 文件。据我了解，这类资源应该放在 static（Webpack simple 中默认不存在）或 assets 文件夹中。结果，我总是得到相同的 2 个错误。

GET http://localhost:8080/assets/settings.js 404（未找到） 拒绝执行来自 'http://localhost:8080/assets/settings.js' 的脚本，因为它的 MIME 类型 ('text/html') 不可执行，并且启用了严格的 MIME 类型检查。

摆脱错误的唯一方法是将mime类型更改为text/html，但浏览器不再解释javascript。

有人可以帮我吗？

【参考方案1】：

第一个解决方案

我通过修改 dist/index.html 文件中的路径手动修复了此类错误：

初始路径：

src=/js/app.96a55d06.js

修改后的路径（在字符串开头添加点）：

src=./js/app.96a55d06.js

.css 和 .js 导入重复此过程

第二个解决方案（更好）

运行npm run build，其中构建定义为vue-cli-service build 制作某种服务器：python3 -m http.server。请注意，它应该在 dist 文件夹（您的构建文件夹）内完成