如何包含'resources'文件夹中的js文件(Laravel 5.5)



我使用以下代码来包含我的js文件:

Meta::addJs('admin_js', '/resources/assets/admin_js/admin_app.js');

该文件存在,但在控制台中我看到状态 404。

如果我将文件移动到"公共"文件夹 - 一切正常。但是我希望此文件存储在"资源"目录中

你必须
  1. 将JS文件移动到public或存储到storage中并建立符号链接。
  2. 或者您需要创建符号链接resources目录到public目录(不推荐)。

  3. 您需要使用最推荐和最有效的Laravel方法来使用Laravel混合物。请使用下面的链接阅读有关拉拉维尔混合溶液的信息。

https://laravel.com/docs/5.6/mix

它将允许您将js资产放入resources目录中,并在安装程序将使用的public中制作压缩的js文件。

LARAVEL 7.0 的更新:

将香草 JavaScript 文件添加到"资源":

  1. resources/js中创建文件(在本例中称为">file.js")
  2. 转到webpack.mix.js文件(底部)
  3. 添加:mix.js('resources/js/file.js', 'public/js');
  4. 在终端中运行:npm run production

我不知道我是否迟到了,但是当我需要从视图文件中的目录和子目录中加载JS文件时,我这样做了,它对我来说非常有效。 顺便说一句,我使用 laravel 5.7。

首先,我编写了一个函数,该函数使用此函数搜索任何给定目录中的任何文件 .

/**
* Search for file and return full path.
*
* @param  string  $pattern
* @return array
*/
function rglob($pattern, $flags = 0) {
$files = glob($pattern, $flags);
foreach (glob(dirname($pattern).'/*', GLOB_ONLYDIR|GLOB_NOSORT) as $dir) {
$files = array_merge($files, rglob($dir.'/'.basename($pattern), $flags));
}
return $files;
}

上面将返回我的"资源/视图"目录中每个".js"文件的完整路径。 然后我调用了上面的函数,将每个js的内容复制到我使用以下函数在我的public/js中创建的单个js文件(new.js)。

/**
* Load js file from each view subdirectory into public js.
*
* @return void
*/
function load_js_function(){
//call to the previous function that returns all js files in view directory
$files = rglob(resource_path('views').'/*/*.js');
foreach($files as $file) {
copy($file, base_path('public/js/new.js'));
}
}

在此之后,我在加载 public/js/new.js后立即在我的主刀片布局中调用了 load_js_function()(我加载了我所有的 css、js 等),您可以在下面看到。

<script src="{!! asset('js/new.js') !!}"></script>
<!-- load all js from each module -->
{{ load_js_function() }}

当您更新原始文件的内容时,这些解决方案会公开更新文件。 如果它对您有用,请投票,如果您在实现此问题时遇到问题,请发表评论,我很乐意提供更多说明。 干杯

LARAVEL 9.0 的更新:

Laravel现在默认使用Vite而不是Mix

将香草 JavaScript 文件添加到"资源":

  1. 在 resources/js 中创建文件(在本例中称为"file.js")

  2. 转到 vite.config.js 文件并将您的文件名添加到输入

    input: [
    // rest of your inputs
    'resources/js/file.js',
    ],
    
  3. 添加对<head>的引用:

    <head>
    {{-- rest of your head --}}
    @vite('resources/js/file.js')
    </head>
    
  4. 运行npm run dev(如果尚未运行npm install)

有关详细信息,请参阅文档。

最新更新