标签: laravel-mix

我很难使用Laravel Mix和DataTables。我遇到的问题是，当我编译.js文件等时，每次我随后访问执行jQuery数据表的页面时，都会引发以下错误：

错误是：

jQuery.Deferred exception: $(...).DataTable is not a function TypeError: $(...).DataTable is not a function
Uncaught TypeError: $(...).DataTable is not a function

据我了解，$(...).DataTable它不是全局变量，但是如何确保可以在应用程序中“在全局范围内”访问它？

以下是我的设置：

app.js

import jquery from 'jquery/dist/jquery.slim'
import 'bootstrap-sass'
import 'datatables.net';
import dt from 'datatables.net-bs';

window.$ = window.jQuery = jquery;

webpack.mix.js

mix
    .js('resources/assets/admin/js/app.js', 'js/')
    .extract([
        'jquery', 'bootstrap-sass', 'datatables.net', 'datatables.net-bs'
    ])
    .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery', 'jquery'],
        DataTable : 'datatables.net-bs'
    })

任何想法将不胜感激。

我正在尝试将Bootstrap Vue加载到Laravel 5.6项目中

在官方的文档说,修改webpack.config.js文件,如:

+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }

Webpack文档:https://webpack.js.org/guides/asset-management/#loading-css

我没有webpack.config.js文件所以我尝试使用Laravel mix加载CSS

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
    .styles('node_modules/bootstrap-vue/dist/bootstrap-vue.css', 'public/css');

这给了我一个错误

mix.combine()需要一个完整的输出文件路径作为第二个参数.

而且我不相信这是正确的做法.

将bootstrap-vue添加到新的Laravel 5.6项目中的正确方法是什么？

我正在使用laravel-mix建在的顶部webpack。我遇到了字体目录问题。例如，font-awesome程序包有一个scss文件和一个放置所有字体的字体目录。

font-awesome:.
????scss
?       fontawesome.scss
????webfonts
        fa-regular-400.eot
        fa-regular-400.svg
        fa-regular-400.ttf
        fa-regular-400.woff
        fa-regular-400.woff2

所以我把这个包放在我的resources/assets/sass目录中。

resources:.
????asset
    ????sass
        ?   main.scss
        ?
        ????font-awesome (directory)

main.scss 包含代码：

@import 'font-awesome/scss/fontawesome';

webpack.mix.js 包含：

mix.sass('resources/assets/sass/main.scss', 'public/css/frontend.css');

所有资产均已成功编译。现在public目录有一个cssand font目录，其中包含所有这样的字体。

public:.
?   index.php
?
????css
?       frontend.css
?
????fonts
?       fa-regular-400.eot
?       fa-regular-400.svg
?       fa-regular-400.ttf
?       fa-regular-400.woff
?       fa-regular-400.woff2

但是我想要的是，我不想将所有字体都编译到public/fonts要编译为以下结构的目录中public/fonts/vendor/font-awesome

public:.
????css
?       frontend.css
?
????fonts
    ????vendor
        ????font-awesome
                fa-regular-400.eot
                fa-regular-400.svg
                fa-regular-400.ttf
                fa-regular-400.woff
                fa-regular-400.woff2

我需要在 …

我正在尝试npm run dev在Laravel项目上运行，但出现以下错误：

Error: Cannot find module '/home/faramarz/todo/node_modules/laravel-mix/setup/     
webpack.config.js'    

是的，在节点模块目录中没有这样的文件。但是我npm install没有问题。
我也跑了，npm i laravel-mix但没有安装。

这是我的package.json：

{
"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": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "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": {
    "axios": "^0.17",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.2.0",
    "jquery": "^3.2", …

我正在尝试在 Laravel 环境中使用羽毛图标，我以为我会通过 npm 来完成。有人可以帮助我了解这是如何工作的，因为我无法使其正常工作。我对使用包很陌生。

我安装了

npm install feather-icons --save

然后我添加const feather = require('feather-icons')到我的资源/app.js，

然后我运行“npm run dev”

1. 我将如何在我的页面上显示在这个网站上列出的图标（比如圆）？

2. 我上面做的对吗？

谢谢

我正在尝试将 app.scss 导入到 application.vue 中，但不断收到别名 sass 无法识别的错误。我在网上查看了如何将别名添加到我的混合文件中，我有以下 webpack.mix.js。在我的 vue 组件中，我有以下代码

<style lang="scss">
    @import 'sass/app.scss';
    html, body{
        margin: 0px;
        padding: 0px;
        background-color: $secondary-color;
    }
</style>

在我的 webpack.mix.js 中

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

mix.webpackConfig({
   resolve: {
      alias: {
         '@': path.resolve(__dirname,'/resources/js'),
         'sass': path.resolve(__dirname, '/resources/assets/sass')
      },
   },
});

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

我尝试将别名更改为，~但没有成功。我在这里做错了什么？

我想创建一个带有 Laravel Lumen 和 VueJS 的 Web 应用程序，其中 Laravel Lumen 用于 API，VueJS 用于 SPA。在应用程序中，我想要一个管理部分、一个小论坛和网站。我想在未来的项目中重复使用这个概念，在那里我可以轻松决定是否需要网站中的论坛或管理部分，或者是否可以像添加商店一样轻松扩展。

我的结构概念

我的想法是为 Lumen 项目中的不同部分制作三个独立的 vue 实例。目录结构的示例如下所示：

(lumen project)
  ??? app
  ??? node_modules
  ??? public
  ??? resources
  ?   ??? js
  ?   ?   ??? admin
  ?   ?   ?   ??? components
  ?   ?   ?   ??? router
  ?   ?   ?   ??? store
  ?   ?   ?   ??? views
  ?   ?   ?   ??? admin.js    // where I create a vue instance
  ?   ?   ??? forum
  ?   ?   ?   ??? components
  ?   ? …

有没有办法通过命令行将参数传递给 laravel mix 并将它们放入 webpack.mix.js 文件中？例如，我添加了 frontend-dev 行，但运行“yarn run frontend-dev”后无法获取“foo”变量。

包.json

{
    "private": true,
    "scripts": {
        "development": "mix",
        "frontend-dev": "mix -- --env foo=frontend"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14"
    }
}

webpack.mix.js

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

//console.log(process.env);
console.log(process.env.foo); //output: undefined

在我的 laravel 项目上安装 vue.js 并运行后npm run dev出现此错误。

我有一个 Laravel 8 项目，使用 PHP7，想尝试一下 Laravel Breeze，但是根据 Laravel 文档安装后，Tailwind 样式没有反映在我的登录和注册页面上。

页面顶部有一个损坏的脚本加载 @vite('resources/css/app.css', 'resources/js/app.js')

我检查了 app.blade.php 和 guest.blade 并发现 @vite('resources/css/app.css', 'resources/js/app.js') 正在加载到 head 部分。

这里缺少什么？我需要不同的配置来编译我的资产吗？