版本功能不适用于 Laravel Mix 中的 JS 文件
Version function does not work for JS files in Laravel Mix
我写了下面的代码,结合了CSS和JS文件,Webpack.mix.js结果正确,但是版本功能对JS文件不起作用!怎么弄才对,CSS和JS都变成版本了?
webpack.mix.js
mix.setPublicPath('/')
.copy('node_modules/bootstrap/dist/js/bootstrap.js', 'resources/js')
.copy('node_modules/jquery/dist/jquery.js', 'resources/js')
.scripts([
'resources/js/bootstrap.js',
'resources/js/jquery.js'
], 'resources/js/app.js');
mix.sass('resources/sass/app.scss', 'public/css')
.styles([
'public/css/app.css',
'public/css/myCss.css'
], 'public/css/all.css')
.js('resources/js/app.js', 'public/js')
.version();
混合-manifest.json
{
"/css/app.css": "/css/app.css?id=35978cdc6a38f7d64fbb",
"/css/all.css": "/css/all.css?id=eda19119aa76ef087fde"
}
我将 <script src="{{ mix('js/all.js') }}"></script>
添加到我的 Blade 文件中
相反,像这样构建您的 webpack.mix.js 配置。
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.styles([
'public/css/myCss.css'
], 'public/css/all.css')
.version();
确保安装了 jQuery 和 Bootstrap。您可能还想将 Laravel Mix 更新到最新版本。
npm install bootstrap
npm install jquery
npm install laravel-mix
在顶部的 /resources/js/bootstrap.js 中,添加或修改这些行。这会在您的应用程序中加载 jQuery 和 Bootstrap。
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
在/resources/sass/app.scss:
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
编译您的资产。
npm run production
您现在有两个 CSS 文件引用,都在模板 Blade 文件的顶部。
<script src="{{ mix('css/app.css') }}"></script>
<script src="{{ mix('css/all.css') }}"></script>
在模板底部,使用app.js
:
<script src="{{ mix('js/app.js') }}"></script>
请注意,您的 mix-manifest 文件现在包含此内容。
{
"/js/app.js": "/js/app.js?id=0b5e26cf3116bf443cac",
"/css/app.css": "/css/app.css?id=a99cdff2ed9d413fcb8a",
"/css/all.css": "/css/all.css?id=a99cdff2ed9d413fcb8a"
}
我写了下面的代码,结合了CSS和JS文件,Webpack.mix.js结果正确,但是版本功能对JS文件不起作用!怎么弄才对,CSS和JS都变成版本了?
webpack.mix.js
mix.setPublicPath('/')
.copy('node_modules/bootstrap/dist/js/bootstrap.js', 'resources/js')
.copy('node_modules/jquery/dist/jquery.js', 'resources/js')
.scripts([
'resources/js/bootstrap.js',
'resources/js/jquery.js'
], 'resources/js/app.js');
mix.sass('resources/sass/app.scss', 'public/css')
.styles([
'public/css/app.css',
'public/css/myCss.css'
], 'public/css/all.css')
.js('resources/js/app.js', 'public/js')
.version();
混合-manifest.json
{
"/css/app.css": "/css/app.css?id=35978cdc6a38f7d64fbb",
"/css/all.css": "/css/all.css?id=eda19119aa76ef087fde"
}
我将 <script src="{{ mix('js/all.js') }}"></script>
添加到我的 Blade 文件中
相反,像这样构建您的 webpack.mix.js 配置。
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.styles([
'public/css/myCss.css'
], 'public/css/all.css')
.version();
确保安装了 jQuery 和 Bootstrap。您可能还想将 Laravel Mix 更新到最新版本。
npm install bootstrap
npm install jquery
npm install laravel-mix
在顶部的 /resources/js/bootstrap.js 中,添加或修改这些行。这会在您的应用程序中加载 jQuery 和 Bootstrap。
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
在/resources/sass/app.scss:
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
编译您的资产。
npm run production
您现在有两个 CSS 文件引用,都在模板 Blade 文件的顶部。
<script src="{{ mix('css/app.css') }}"></script>
<script src="{{ mix('css/all.css') }}"></script>
在模板底部,使用app.js
:
<script src="{{ mix('js/app.js') }}"></script>
请注意,您的 mix-manifest 文件现在包含此内容。
{
"/js/app.js": "/js/app.js?id=0b5e26cf3116bf443cac",
"/css/app.css": "/css/app.css?id=a99cdff2ed9d413fcb8a",
"/css/all.css": "/css/all.css?id=a99cdff2ed9d413fcb8a"
}