我正在尝试使用Vite和Laravel 9,但是没有前端框架(如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();
到目前为止,这似乎正在起作用(?)。至少我是这么认为的。Vite到目前为止没有给我任何错误(yay!)。
但是当我尝试在一个blade模板中导入这个模块时,我无法让它工作。 因此,在我的blade模板底部添加了这个:
<script type="module">
import MenuBtnToggle from 'menu-btn-toggle';
new MenuBtnToggle();
</script>
但是这会给我以下错误:
但是当我添加其中一个示例时,错误会更改为:未捕获的类型错误:解析模块规范符“menu-btn-toggle”时出错。相对模块规范符必须以“./”、“../”或“/”开头。
因为它无法找到该模块。 它返回404。由于不允许的MIME类型(“text/html”),因此已阻止从“[local_dev_url]/menu-btn-toggle”加载模块。
没有前端框架,我是否可以做到我想要的? 或者我没有看到明显的东西? 我有php经验,不幸的是没有足够的Laravel和Vite经验。