我正在试用Laravel 9和Vite,但是没有(!)一个前端框架(像Vue或者React)。我正在尝试制作一个可重用的js模块,我可以在不同的Blade模板中使用/加载。
所以我在“*resources/js/components/utilities *”中创建了一个文件“menu-btn-toggle.js”。
export class MenuBtnToggle
{
constructor() {
console.log('MenuBtnToggle');
}
}
然后我在“*resources/js/components *”中创建了一个“utilities.js”文件。
import './utilities/menu-btn-toggle';
然后我更新了“resources/js”中的“app.js”文件
import './bootstrap';
import './components/utilities';
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
到目前为止,这似乎是工作(?)。至少,我认为是这样。维特是没有给我任何错误,到目前为止(耶!)
但我尝试在刀片模板中导入该模块,但无法使其工作。因此,我在刀片模板的底部添加了以下内容:
<script type="module">
import MenuBtnToggle from 'menu-btn-toggle';
new MenuBtnToggle();
</script>
但这给了我以下错误:
未捕获的类型错误:解析模块说明符“menu-btn-toggle”时出错。相对模块说明符必须以.“/"、..”/”或“/"开头。
但当我添加其中一个示例时,错误变为:
从“[local_dev_url]/menu-btn-toggle”加载模块被阻止,因为MIME类型(“text/html”)不被允许。
因为它找不到这个模块。它返回一个404。
有没有可能在没有前端框架的情况下做我想要的事情?或者我没有看到一些明显的东西?我有使用php的经验,不幸的是没有(足够的)使用Laravel和Vite。
1条答案
按热度按时间dtcbnfnu1#
我陷入了几乎相同的情况下,我们无法使用Vite在我们的刀片文件中使用导入语句。
未捕获的类型错误:解析模块说明符"menu-btn-toggle"时出错。相对模块说明符必须以."/"、.."/"或"/"开头。
或者我们得到404阻塞错误几乎与
从"[local_dev_url ]/menu-btn-toggle"加载模块被阻止,因为MIME类型("text/html")不被允许。
当导入外部npm包或模块时,我们需要把它们放在windows对象中,就像上面对Alpine所做的那样
但对于您的特定案例问题,您必须执行以下操作
1)内部菜单-按钮-切换. js
2)内部实用工具. js
1.最后在你的app.js里
导入"./组件/实用程序";
1.现在,在您的. blade文件中,无需导入MenuBtnToggle,只需执行以下操作
新建菜单切换();
不需要在blade中使用
import MenuBtnToggle from 'menu-btn-toggle';
,重要的是通过vite将您的app.js文件正确导入到. blade文件中而且它工作。它已经工作时,复制相同的文件/设置作为您的。