标签: laravel-mix
Laravel 5.4 使用 browserSync 观看刀片文件
默认情况下，laravel 5.4 mix 和 browserSync 即将推出。如果我*.blade.php从resources/views. 在我的webpack.mix.js我有这个配置：
const { mix } = require('laravel-mix');
mix
.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.browserSync({
proxy:'localhost',
port:8000,
files: {
match: [
"resources/views/**/*.blade.php",
"public/css/*.css",
"public/js/*.js",
],
fn: function (event, file) {
/** Custom event handler **/
},
options: {
ignored: [
'*.txt',
'*.json'
]
}
},
logPrefix:'L54',
});
我不知道我是否做得对，或者我可能必须设置 Mix 配置等等。任何帮助将非常感激。
推荐指数
解决办法
查看次数
图片具有绝对路径-如何在LaravelMix中使用子目录URL
我的Laravel Mix应用程序将放置在服务器上的子目录中，例如：http：// localhost / pat-os-server / public /
我的Vue组件中的图像路径从
<img id="logo" src="../assets/img/pat_logo.png">
至
<img id="logo" src="/images/pat_logo.png">
现在由于应用程序所在的子目录而未显示该图像。正确的路径应该是images / pat_logo.png（相对-首选）或/pat-os-server/public/images/pat_logo.png（绝对）
我试图像这样在webpack.mix.js中设置输出路径：
mix.setPublicPath('/pat-os-server/public/');
mix.setResourceRoot('/pat-os-server/public/');
但这并不会改变输出路径。仍然是/images/pat_logo.png。我希望它现在是/pat-os-server/public/images/pat_logo.png。对setPublicPath和setResourceRoot使用其他值（包括“ /”和“”）不会造成任何差异。
我已经在调用其他方法之前放置了路径设置方法，所以当前的webpack.mix.js如下所示：
const { mix } = require('laravel-mix');
mix.setPublicPath('/pat-os-server/public/');
mix.setResourceRoot('/pat-os-server/public/');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
如何获得图像的相对输出路径或更改绝对路径？
感谢您的支持。
编辑
我刚刚意识到，在我的laravel项目中创建了一个子文件夹“ pat-os-server”，并将所有编译的项目文件复制到该子文件夹中。所以看来我误解了setPublicPath设置。
我不希望将输出文件放置到另一个文件夹。我希望项目中的URL指向正确的路径，该路径不是主机/根目录，而是子目录。
推荐指数
解决办法
查看次数
Laravel 5.5 ReferenceError：$ 未定义
出于某种原因，我的 jQuery 拒绝加载。我收到一个错误：
参考错误：$ 未定义
我的模板在views/layouts/editor.blade.php，我正在像这样在模板的头部加载 jQuery
<script src="{{ asset('js/jquery.min.js') }}"></script>
我可以看到 jQuery 已加载到我的控制台中。但我仍然收到错误。
我正在使用 laravel mix 编译我的 javascript，我的 webpack.mix.js 文件如下所示：
// javascript
mix.js('resources/assets/js/app.js', 'public/js')
.js('node_modules/jquery/dist/jquery.min.js', 'public/js')
.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
});
// css
mix.sass('resources/assets/sass/app.scss', 'public/css')
.sass('node_modules/bootstrap/scss/bootstrap.scss', 'public/css');
为什么会这样？
编辑：
我的模板文件如下所示：
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/bootstrap.css') }}" …推荐指数
解决办法
查看次数
如何使用laravel mix缩小CSS文件？
为什么缩小文件等于未缩小文件？
const { mix } = require('laravel-mix');
mix.styles([
'public/some.css',
'public/thing.css',
], 'public/css/index.css');
mix.minify('public/css/index.css');
运行时npm run production，大小为128kB（均压缩）
Asset Size Chunks Chunk Names
mix.js 511 bytes 0 [emitted] mix
/css/index.css 128 kB [emitted]
/css/index.min.css 128 kB [emitted]
运行时npm run dev，两个文件的大小相同，并且大小相同160 kB，即，两个文件均未缩小。缩小版本怎么不取决于min后缀，而是取决于dev \ prod选项？
推荐指数
解决办法
查看次数
laravel mix 中的自动前缀
Laravel mix 不编译自动前缀。output.css 与 input.css 相同
- webpack.mix.js
let mix = require('laravel-mix');
mix.styles('resources/css/input.css', 'public/css/output.css')
.options({
postCss: [
require('autoprefixer')({
browsers: ['last 40 versions'],
})
]
});
- 输入.css
.example {
display: grid;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
- 输出.css
.example {
display: grid;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
- Laravel 5.4 版本
- Laravel 混合 1.0
如何启用自动前缀？
推荐指数
解决办法
查看次数
Laravel-mix : 使用 `mix.js` 或 `mix.scripts`
在 Laravel 5.5 中，我使用 laravel-mix 来编译我的资产。
然而事情是不明确对我说：之间有什么区别mix.js和mix.scripts为什么我会用一个，而不是其他？
推荐指数
解决办法
查看次数
Tempus Dominus Bootstrap4需要moment.js.(日期时间选择器)
我正在尝试使用Tempus Dominus Bootstrap4添加DateTimePicker.但是我收到以下错误.
我使用Laravel作为前端.所以我使用laravel-mix.
我的刀片文件在下面
@extends('layouts.app')
@section('content')
@if((Auth::user()->hasRole('teacher')) || (Auth::user()->hasRole('admin')) || (Auth::user()->hasRole('superadmin')) )
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{__("Dashboard")}}</div>
<div class="card-body">
<p>{{ Auth::user()->name }}</p>
<p>{{ $errors->first('JSONerror') }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
@else
<div class="container"> …推荐指数
解决办法
查看次数
将Laravel .env变量添加到Vue组件
我想使用Vue JS访问.env变量.
在我的.env文件中,我在var中添加了"MIX_"前缀.
MIX_VAR=key
然后在vue组件中,我在created()中:
console.log(process.env.MIX_VAR);
结果我不断定义.
我已经尝试清除配置缓存,但仍然遇到同样的问题.有任何想法吗？
推荐指数
解决办法
查看次数
反复重新安装尝试后，npm run找不到模块“ sass”
任何调用都会npm run产生此错误：
$ npm run dev
> @ dev /project
> npm run development
> @ development /project
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
/project/node_modules/webpack-cli/bin/cli.js:235
throw err;
^
Error: Cannot find module 'sass'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
at Function.Module._load (internal/modules/cjs/loader.js:529:25)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at implementation (/project/node_modules/laravel-mix/src/components/Sass.js:52:39)
at implementation (/project/node_modules/laravel-mix/src/components/Preprocessor.js:125:61)
at global.tap (/project/node_modules/laravel-mix/src/helpers.js:10:5)
at Sass.loaderOptions (/project/node_modules/laravel-mix/src/components/Preprocessor.js:123:9)
at extractPlugin (/project/node_modules/laravel-mix/src/components/Preprocessor.js:87:39)
at global.tap (/project/node_modules/laravel-mix/src/helpers.js:10:5)
at details.forEach.preprocessor (/project/node_modules/laravel-mix/src/components/Preprocessor.js:27:13)
at Array.forEach (<anonymous>)
at Sass.webpackRules (/project/node_modules/laravel-mix/src/components/Preprocessor.js:22:22)
at ComponentFactory.applyRules (/project/node_modules/laravel-mix/src/components/ComponentFactory.js:155:23)
at Mix.listen.rules …推荐指数
解决办法
查看次数
如何从生产中删除 console.log？
如何从生产中删除所有 console.log。此代码不适用于laravel-mix 4.x：
webpack.mix.js
mix
.js('resources/js/app.js', 'public/js')
if (mix.inProduction()) {
mix.options({
uglify: {
uglifyOptions: {
warnings: false,
comments: false,
beautify: false,
compress: {
drop_console: true,
}
}
}
});
mix.version();
}
推荐指数
解决办法
查看次数
标签 统计
laravel-mix ×10
laravel ×5
css ×2
jquery ×2
vue.js ×2
webpack ×2
browser-sync ×1
gulp ×1
javascript ×1
laravel-5 ×1
laravel-5.4 ×1
minify ×1
momentjs ×1
node-sass ×1
node.js ×1
npm ×1
php ×1