标签: laravel-mix

使用 Laravel Mix，是否可以使用一个命令查看两个 Webpack 配置文件，以便对任何底层文件的更改立即导致必要的文件被编译？

具体来说，我有以下两个与 Laravel Mix 一起使用的 Webpack 配置文件：webpack.css.mix.js和webpack.js.mix.js

scripts然后我在的对象中有以下命令package.json：

"development-css": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.css.mix",
"development-js": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js --env.mixfile=webpack.js.mix",
"watch": "npm run development-css -- --watch & npm run development-js -- --watch",

该npm run watch命令仅监视指定的第一个命令。在上述情况下，我保存到 Sass 文件的任何更改都会构建，但不会更改任何 JS/Vue 文件。如果我在命令中切换这两个命令watch，那么 JS 将基于更改/保存构建，而不是 Sass。

有谁知道如何构造命令npm run watch（或底层命令），以便我可以同时观看 Sass 和 JS？

另外，值得一提的是，由于目前 Laravel Mix 中的一个错误，我不得不将 Sass 和 JS 编译分成两个单独的文件。此错误记录在此处：https ://github.com/JeffreyWay/laravel-mix/issues/1914 …

我过去能够成功部署 Laravel 项目。我第一次将 Laravel 8 与 Jetstream 和 Livewire 一起使用。Laravel 现在使用 Fortify 进行登录和注册身份验证。

我的本地服务器运行完美，没有任何问题。将项目部署到 Hostgator 共享托管帐户后，我的主页正确加载，并正确从数据库读取和输出数据。

但是，当我尝试访问时

mydomain.com/login/ 或 mydomain.com/login 或 mydomain.com/register/ 或 mydomain.com/register

我收到 500 错误。在这个问题的末尾，我粘贴了错误日志。

我做了以下事情：

1. 更新了作曲家版本
2. npm 重建
3. npm 安装
4. 我尝试了两种方法： npm run dev 和 npm run production 并重新上传了每个场景中的所有内容。
5. 我已将 public/index.php 路径指向正确的应用程序文件夹以读取 autoload.php 和 bootstrap/app.php 文件。
6. 我将所有文件夹和子文件夹更改为 755，将所有文件更改为 644

我觉得很奇怪，我的主页加载完美，并且从数据库中获取数据也很好，因此我知道我的 .env 文件具有正确的数据库连接凭据。只有登录和注册才会抛出500错误。

我的环境文件：

APP_NAME=NameOfApp
APP_ENV=production
APP_KEY=base64:KeyGeneratedWhenProjectCreated
APP_DEBUG=false
APP_URL=http://domain
LOG_CHANNEL=stack
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=localhost
DB_PORT=3306
DB_DATABASE=db_works_good
DB_USERNAME=username_works_good
DB_PASSWORD=passwordWorksGood

这是 laravel.log （缩写为看起来重要的内容）：

[2020-11-30 20:25:34] production.ERROR: The Mix manifest does not …

我正在尝试将 Laravel 8 与 Vue 2 升级到 Vue 3。我更改了 package.json 中的所有包以支持新的 Vue 3 依赖项。我什至无法使用 Vue 3 编译一个简单的测试应用程序。当我尝试构建时遇到的错误并没有给我太多信息。

当我尝试“纱线观察”时，有人知道如何解决此错误吗？

\xce\xbb yarn watch\nyarn run v1.22.5\n$ mix watch\n[webpack-cli] TypeError: Cannot read property 'resolve' of undefined\n    at Alias.register (c:\\wamp\\www\\Stipender\\node_modules\\laravel-mix-alias\\index.js:8:37)\n    at Object.components.<computed> [as alias] (c:\\wamp\\www\\Stipender\\node_modules\\laravel-mix\\src\\components\\ComponentRegistrar.js:133:53)\n    at Object.<anonymous> (c:\\wamp\\www\\Stipender\\webpack.mix.js:15:5)\n    at Module._compile (c:\\wamp\\www\\Stipender\\node_modules\\v8-compile-cache\\v8-compile-cache.js:192:30)\n    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1137:10)\n    at Module.load (node:internal/modules/cjs/loader:973:32)\n    at Function.Module._load (node:internal/modules/cjs/loader:813:14)\n    at Module.require (node:internal/modules/cjs/loader:997:19)\n    at require (c:\\wamp\\www\\Stipender\\node_modules\\v8-compile-cache\\v8-compile-cache.js:159:20)\n    at module.exports (c:\\wamp\\www\\Stipender\\node_modules\\laravel-mix\\setup\\webpack.config.js:4:5)\nerror Command failed with exit code 2.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n

我正在尝试将此包https://github.com/shwilliam/vue-scrollin安装到我的 laravel + vue 项目中。用laravel mix编译后，出现以下错误：

找不到模块：错误：无法解析“\node_modules\vue-scrollin\dist”中的“计时器”

重大更改：webpack < 5 默认情况下包含 Node.js 核心模块的 Polyfill。这已不再是这种情况。验证您是否需要此模块并为其配置一个polyfill。如果你想包含一个polyfill，你需要： - 添加一个后备 'resolve.fallback: { "timers": require.resolve("timers-browserify") }' - 安装 'timers-browserify' 如果你不这样做想要包含一个polyfill，你可以使用一个空模块，如下所示：resolve.fallback: { "timers": false }

我按照给定的说明进行操作，但它给了我同样的错误。

webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js').vue()
        .sass('resources/css/app.scss', 'public/css/app.css')
        .postCss('resources/css/app.css', 'public/css', [
            //
        ])
        .webpackConfig(require('./webpack.config'));

webpack.config.js

module.exports = {
    resolve: {
        fallback: { "timers": require.resolve("timers") }
    },
};

包.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000", …

我想在 Laravel 8 中安装 Tailwind。我已按照文档操作并输入以下内容（未显示错误）。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

然后我无法成功运行，npm run watch因为安装最新的PostCSS版本v8时出现问题。我查看了一个解决方案，根据Tailwind CSS Laravel Mix Error - Forces PostCSS 8 to beinstalled，我必须升级 Webpack。然后我输入：

npm install laravel-mix@latest

根据文档https://laravel-mix.com/docs/6.0/upgrade ，这包括最新的 Webpack 版本。（没有显示错误）

如果我输入，npm run watch,则会出现以下错误；我不明白，在谷歌中没有找到任何东西......我正在寻求一些帮助：

npm WARN 生命周期 用于脚本的节点二进制文件是 /snap/bin/node，但 npm 使用 /snap/node/3292/bin/node 本身。使用该 --scripts-prepend-node-path选项来包含执行 npm 的节点二进制文件的路径。

@ watch /home/x/Documents/projets/web/site_perso npm 运行开发 -- --watch

npm WARN 生命周期 用于脚本的节点二进制文件是 /snap/bin/node，但 npm 使用 /snap/node/3292/bin/node 本身。使用该 --scripts-prepend-node-path选项来包含执行 npm 的节点二进制文件的路径。

@开发/home/x/Documents/projets/web/site_perso cross-env NODE_ENV=开发node_modules/webpack/bin/webpack.js …

我正在使用 Vue2 和 laravel-mix，我希望我的变量可以全局访问。我最终发现了这个：

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    {
                        loader:  'sass-loader',
                        options: {
                            //this might be "data" or "prependData" depening on your version
                            additionalData: `@import "./resources/js/styles/variables.scss";`
                        }
                    }
                ]
            }
        ]
    }
})

这确实使我的变量可以全局访问，但本质上是将其复制variables.scss到每个 vue 组件中，这极大地膨胀了我的包大小。

我怎样才能防止这种情况发生？

编辑：当导入的文件相对较大时，这只是一个问题。在我的项目中，导入的文件本身导入了一个主题 scss（以访问主题变量），它最终将整个内容复制到我需要变量的任何地方。
我通过在单独的文件中定义自定义变量并在“覆盖变量”文件中使用这些变量来解决此问题，如下所示：
custom-variables.scss

$red: #ff0000;

覆盖变量.scss

import 'theme.scss'; //this bloated my project
import 'custom-variables';

$--theme-red: $red

当我在 vue 组件中需要这种主题颜色时，我只是导入了而custom-variables.scss不是overwriting-variables.scss.
这确实解决了我的膨胀问题，但并没有完全解决问题，custom-variables.scss我的项目中仍然有多个实例，这并不重要，因为它真的很小。所以我仍然很高兴听到其他解决方案！

所以我目前正在尝试使用此软件包设置 Monaco 编辑器： https: //github.com/egoist/vue-monaco

除了一条错误消息之外，它工作得很好：

Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/Microsoft/monaco-editor#faq

You must define a function MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker

现在我知道你需要启动一个工作人员，但是，我似乎无法让它正常工作。

我一直在使用 Laravel 和 Laravel Mix 来让这一切正常工作，但是似乎没有关于如何设置工作人员的文档。

任何帮助，将不胜感激。

有没有办法合并SCSS和CSS？

目前我这样做如下,但它不起作用.下面的代码应该将scss编译成临时目录,然后将其与普通的css合并.

mix.sass('resources/assets/sass/app.scss', '../resources/assets/tmp_compilation_files/scss-assets.css').styles([ 'resources/assets/tmp_compilation_files/scss-assets.css', 'node_modules/isteven-angular-multiselect/isteven-multi-select.css' ], 'public/css/app.css');

但没什么.public/css/app.css文件中缺少已编译的SASS.这太烦人了,这么简单的任务,这是不可行的.我能够用elixir - 将scss编译成tmp目录(./resources/tmp),然后使用styles()将其与css文件合并.

我还没有在文档中找到有关路径参数的任何信息 - 我在哪里指定绝对路径,相对于公共目录的位置？

我正在使用Laravel 5.6进行新项目laravel-mix@2.1.14。当我使用编译资产时npm run production，它们的后缀没有应有的后缀

注意

即使删除if mix.inProduction()版本也不起作用

问题

我是唯一面临这个问题的人吗？我该怎么办 ？

webpack.mix.js

let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
 .sass('resources/assets/sass/app.scss', 'public/css')
 .copyDirectory('resources/assets/images', 'public/images');

if (mix.inProduction()) {
  mix.version();
}

第1步：在控制台/终端中。

npm install --save sweetalert2

第2步：在app.scss中添加此行...

@import '~sweetalert2/src/sweetalert2.scss';

第3步：在app.js中添加此行...

const swal = require('sweetalert2');

STEP4：在webpack.min.js中...

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

第5步： npm run dev

步骤6：将app.js和app.css添加到HTML文档

我收到此错误：

未捕获的ReferenceError：未定义swal

缺少的步骤是什么？