wts*_*ort 14 javascript frontend laravel vite
我将 Laravel 与 Vite 结合使用,我想使用 Vanillia JS 代码添加文件。在我使用mix之前,我从来没有使用过Vite。我尝试将此代码添加到文件 vite.config.js 中,如下例所示:
laravel({
input: [
'resources/sass/app.scss',
'resources/js/app.js',
'resources/js/test.js', //this is my code
],
refresh: true,
}),
Run Code Online (Sandbox Code Playgroud)
但它不起作用。我需要添加一个库和带有配置的代码。你可以帮帮我吗?
这适用于您自己创建的js文件和节点模块库js文件
您需要在vite.config.js初始 HTML 文件 ( app.blade.php / welcome.blade.php)中声明它
在 vite.config.js 中
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
'resources/js/test.js', //your custom js
'node_modules/flowbite/dist/flowbite.js', //node modules js
'node_modules/flowbite/dist/datepicker.js'
],
refresh: true,
}),
],
});
Run Code Online (Sandbox Code Playgroud)
在 HTML.blade.php 中
<head>
@vite(['resources/css/app.css', 'resources/js/app.js',
'resources/js/test.js',node_modules/flowbite/dist/flowbite.js'
,'node_modules/flowbite/dist/datepicker.js'])
</head>
Run Code Online (Sandbox Code Playgroud)
PS:我在这里使用 Flowbite 插件作为示例
使用@vite('resources/js/test.js')指令:
https: //legacy.laravel-vite.dev/guide/usage.html#vite
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Laravel</title>
@client
@vite('main')
@vite('resources/js/some-script.js')
<!--
In development:
<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/resources/scripts/main.ts"></script>
<script type="module" src="http://localhost:3000/resources/js/some-script.js"></script>
In production:
<script type="module" src="http://laravel.local/build/assets/main.66e83946.js"></script>
<script type="module" src="http://laravel.local/build/assets/some-script.6d3515d2.js"></script>
-->
</head>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
20904 次 |
| 最近记录: |