标签: laravel-mix

我的 Laravel 项目中有一个近乎普通的 webpack.mix.js 和 resources/js/app.js 设置。

webpack.mix.js：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

资源/js/app.js：

require('./bootstrap');

window.Vue = require('vue');

Vue.component('profile', require('./components/profile/Profile.vue').default);

const app = new Vue({
    el: '#app'
});

但是，如果我.extract()在 webpack.mix.js 中继续执行，一切都会成功编译，但 Vue 根本不会在浏览器中加载。删除.extract()后一切都会恢复正常。我究竟做错了什么？

我正在使用 Laravel Mix/Webpack 开发 Laravel 项目。我mix watch在 Mac 上使用它来编译我的资源，每当编译时，我都会收到有关错误的简短通知。通知只有足够的空间容纳几行文本，所以我从来不知道消息是什么。有一个Show按钮，但单击它只会关闭通知，而不会显示任何更多信息。

在正在运行的终端中mix watch我可以看到以下输出：

子编译中的 3 个警告 webpack 编译时出现 3 个警告

有没有办法查看整个通知或获取更具解释性的错误消息？

我用来laravel-mix捆绑我的 Vue 3 和 Pinia 代码。我的app.js看起来像这样：

require('./bootstrap');

import { createApp } from 'vue'
import { createPinia } from "pinia";

const pinia = createPinia();
const app = createApp({});

app.use(pinia);
// ...
// ...
// ...
app.mount('#app');

我的 Vue 组件中的代码是基本的，与 Pinia 文档中的代码没有什么不同https://pinia.vuejs.org/introduction.html#basic-example

然而，即使laravel-mix成功编译并捆绑了所有内容，结果页面在浏览器控制台中显示此错误：

getActivePinia was called with no active Pinia. Did you forget to install pinia?
    const pinia = createPinia()
    app.use(pinia)
This will fail in production.

我已经npm install编辑了 jquery-ui。它在那里全部拆分为组件，在我使用 laravel-mix 编译的 javascript 文件中似乎很难使用它们。

这就是我设法调用可拖动到一组元素的方式：

require('jquery-ui/themes/base/draggable.css');
var jQuery = require('jquery');
var draggable = require('jquery-ui/ui/widgets/draggable');

var draggableOptions = {
    revert: 'invalid',
    // other options...
    cursor: 'move'
};

$('.resource').each(function(index, resource) {
    new draggable(draggableOptions, $(resource));
});

// The documented approach didn't work because there was no function 'draggable'
// $('.resource').draggable(draggableOptions);

现在我正在尝试使用 jquery-ui 效果，例如bounceor shake，但我无法以任何方式导入和/或调用它们，无论是记录的还是上面的。总而言之，我觉得我做错了，应该更容易。

我已经更新了laravel-mix到版本4.0.12,面对*.scss在我使用相对路径包含背景图像的线上的破坏构建

我有一个下一个文件结构

resources/
|-assets/
||-img/
|||-background.png
||-sass/
|||-footer.scss

我在footer.scss中的代码是下一个

.footer {
  background-image: url(../img/background.png)
}

我的webpack.mix.js是下一个

const mix = require('laravel-mix');

const resourcesAssets = 'resources/assets/';
const dest = 'public/assets/';

mix
  .copy(`${resourcesAssets}images`, `${dest}images`, false)
  .sass(`${resourcesAssets}scss/footer.scss`, `${dest}css`);

在筹备期间,npm run prod我得到了

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: CSS error
predicate must return an absolute path or the result of calling next()
at file://C:\xampp\htdocs\laravel-project\resources\assets\sass\footer.scss:2:3
at encodeError (C:\xampp\htdocs\laravel-project\node_modules\resolve-url-loader\index.js:218:12) …

在我在终端中"bootstrap": "^4.3.1"输入内容之后，我像这样在我的package.json文件中添加了Bootstrap，npm install并且它没有任何错误地完成了。下一步是什么？如何在我的视图中添加Bootstrap？看来NPM将Bootstrap安装到了/ node_modules文件夹中，但是我在resources / js / bootstrap.js中也有bootstrap.js文件。

我正在尝试使用 laravel 和 vuejs 创建简单的 CRUD。当我运行 ' npm run watch' 它说 npm run watch

而且，当我运行时php artisan serve，它没有显示任何错误

本地主机

这是我的代码 app.js

应用程序

我使用 webpack 对正在更改的文件运行监视.js，但我需要在项目中使用通配符而不是特定文件名。我目前正在使用下面的命令，它工作正常，并在我运行时编译所有预期的文件npm run watch，但在我直接在任何文件中进行更改后，它永远不会再次运行。我必须停止观看并一次又一次地重新运行相同的命令。我有什么遗漏的吗？

const mix = require('laravel-mix');

mix.scripts([
    'resources/js/vendor/**/*.js',
    'resources/js/modules/**/*.js',
    'resources/js/plugins/**/*.js'
], 'public/js/site.js');

打包文件：

{
"private": true,
"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
    "autoprefixer": "^9.7.6",
    "bulma": "^0.9.0",
    "cross-env": "^5.1",
    "laravel-mix": "^4.0",
    "laravel-mix-purgecss": "^4.1.0",
    "node-sass": …

您好，我知道有一些问题已经相关，如果不是，则完全相同，但由于某种原因，这些答案都不适合我，所以我根据我的具体情况提出这个问题。

我已经使用laravel-mixandvuejs几个月了，只是为了给你一个背景知识，我对使用 webpack 或捆绑器非常陌生。我开始使用它laravel-mix是因为项目需要它，从那时起我什至在单独的项目中也使用它。现在我正在使用新版本的laravel-mix和vuejs，我似乎无法vuejs工作！

让我首先向您展示我的webpack.mix.js：

const mix = require("laravel-mix")

mix.js('src/javascript/app.js', 'assets').extract(['vue', 'vue-lazysizes', 'flickity', 'axios'])
   .vue()
   .sass('src/style/app.scss', 'assets')
   .options({
     postCss: [require('tailwindcss')]
   })

这是我的package.json：

{
  "name": "name",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.mix.js",
  "scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
  },
  "keywords": [],
  "author": "",
  "license": …

问题是当我npm run watch在控制台中不断循环运行时。我的CPU会爆炸。我发现问题出在 tailwind.config.js 文件中。

purge: [
    '**/*.+(html|php)',
    'partials/*.+(html|php)',
    '*.php',
    '*.html'
  ],

问题出在这些路径上，因此出于某种原因，该路径对于以文件夹名称部分开头的路径工作正常，其他 3 个路径有问题。如果我设置以父文件夹名称开始，则无法观看这些文件并且我的 Tailwind 坏了

https://i.stack.imgur.com/nNUme.jpg

TAILWIND tailwind.config.js

module.exports = {
  purge: [
    '**/*.+(html|php)',
    'partials/*.+(html|php)',
    '*.php',
    '*.html'
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    colors: {
      primary: '#15192B',
      secondary: '#2EAEE4',
      neutral: '#436576',
      white: '#fff',
      black: '#000'
    }
  },
  variants: {
    extend: {},
  },
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container': {
          maxWidth: '100%',
          
          '@screen sm': {
            maxWidth: '640px',
          }, …