我第一次和Laravel一起工作.随着5.4版本,他们推出了laraval混合.我试图将我的静态网站的SASS(我用gulp编译)粘贴到资源文件夹中的sass文件中.这很顺利,我的SASS将被编译到公共地图中的app.css文件中.

我有一个主要问题.sass文件(资源/资产/图像)中的所有图像都没有像我希望的那样进行编译.

SASS文件中的代码(资源/资产/ SASS/banners.scss)

section.module.parallax-1 {
  background-image: url('../images/banner1.jpg');
}

用混合编译(app.css)

section.module.parallax-1 {
  background-image: url(/images/banner1.jpg?ef4f135bad144d886f07c8b65f757a85);
}

因此,不是像我在SASS文件中那样将url编译为css,而是将其编译为与最后的哈希不同的东西.此外,在编译sass之后,它会生成一张图像映射,其中包含我在SASS文件中使用的图像.我的图像地图最初位于资源/资产/图像.

我不知道我做错了什么.我试图更改我的sass文件中的URL但这无济于事.有人可以帮助我吗？或者还有其他解决方案吗？

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');

我全新安装了 Laravel 5.4。我的 Windows PC 节点上也安装了以下版本：6.11.0 npm:5.0.3

我已经运行 npm install，但是，当我运行 npm run watch 时，出现以下错误

> @ watch C:\xampp\htdocs\tu
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 10% building modules 1/1 modules 0 active
Webpack is watching the files…
                                                                                                                                95% emitting

 ERROR  Failed to compile with 2 errors                                                                                                                             12:12:42 AM

These dependencies were not found:

* C:\xampp\htdocs\tu\resources\assets\js\app.js in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
* C:\xampp\htdocs\tu\resources\assets\sass\app.scss in multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

To install them, you can run: npm install --save C:\xampp\htdocs\tu\resources\assets\js\app.js C:\xampp\htdocs\tu\resources\assets\sass\app.scss

我已经在互联网上搜索过，但似乎无法正常工作。任何帮助表示赞赏。

问题

我的缓存 Vue.js 组件有问题，我无法在我的设备上重现这个问题，但每次客户端更新我们都会让用户抱怨接口损坏，只有清除浏览器缓存才有帮助。

我使用 Laravel + Vue.js 和它的多页应用程序。

战略

app.js 中包含的一个文件中描述的所有组件，它看起来像这样：

Vue.component('task-feed', () => import('./components/task/task-feed'/* webpackChunkName: "/js/components/task-feed" */));
Vue.component('task-item', () => import('./components/task/task-item'/* webpackChunkName: "/js/components/task-item" */));

有 vue.js 异步组件。

然后我像这样配置了 webpack.mix：

let mix = require('laravel-mix');
const webpack = require('webpack');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
mix.disableNotifications();
let config = {
    watchOptions: {
        ignored: /node_modules/
    },
    resolve: {
        alias: {
            'vue$': mix.inProduction() ? 'vue/dist/vue.runtime.min.js' : 'vue/dist/vue.runtime.js',
        }
    },
    output: {
        chunkFilename: mix.inProduction() ? '[name].[chunkhash].js' : '[name].js',
    },
    plugins: [ …

是否有一种标准方法可以扩展 Laravel Mix 以支持 50 多个不同前端主题的构建过程？

我只是在运行npm run dev，npm run watch目前在我的 webpack.mix.js 文件中有四个不同的主题，并且它会同时构建/观察所有这些主题，但我担心当我们扩展时性能会崩溃。理想情况下，我希望一次只能构建/观看一个主题，例如npm run dev --theme:some-site或npm run watch --theme:another-site

如果我不做任何更改，我的 webpack.mix.js 最终会以这种速度显示如下：

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

// Parent Theme
mix.js('resources/[parent-theme-folder]/assets/js/app.js', 'public/[parent-theme-folder]/js/')
  .sass('resources/[parent-theme-folder]/assets/scss/app.scss', 'public/[parent-theme-folder]/css/')
  ;

// Client 1
mix.js('resources/[child-theme-1-folder]/assets/js/app.js', 'public/[child-theme-1-folder]/js/')
  .sass('resources/[child-theme-1-folder]/assets/scss/app.scss', 'public/[child-theme-1-folder]/css/')
  ;
// Client 2
mix.js('resources/[child-theme-2-folder]/assets/js/app.js', 'public/[child-theme-2-folder]/js/')
  .sass('resources/[child-theme-2-folder]/assets/scss/app.scss', 'public/[child-theme-2-folder]/css/')
  ;
...etc...
// Client 47
mix.js('resources/[child-theme-47-folder]/assets/js/app.js', 'public/[child-theme-47-folder]/js/')
  .sass('resources/[child-theme-47-folder]/assets/scss/app.scss', 'public/[child-theme-47-folder]/css/')
  ;

有什么建议？谢谢！

——

关于我们设置的更多信息，如果有帮助的话...

我们使用父/子主题包 - igaster/laravel-theme - 在一个 Laravel 项目中管理多个前端。本质上，我们有 4 种类型的网站产品，以及 20-30 个客户，这些客户都有自己的多达 …

TLDR；

您是否必须链接 Laravel Mix 方法来维护执行顺序？是否有任何异步方法会阻止使用以下非链接模式mix.scripts(); mix.js(); mix.sass();？

我运行的几个测试表明我不需要链接。

一个例子

由于我们的 Laravel 应用程序是如何设置的，我们需要不止一个 Laravel Mix 设置。我们不是复制粘贴webpack.mix.js文件并修改每个文件中的几行，而是创建一个传递给单个webpack.mix.js文件的配置对象。在此文件中，我们将检查是否已配置各种内容，如果已配置，则运行适当的 Mix 方法。下面是一个伪代码示例。

if ( config.js ) {
  mix.js( config.js.src, config.js.dist );
}

if ( config.sass ) {
  mix.sass( config.sass.src, config.sass.dist );
}

if ( config.concat ) {

  if ( config.concat.styles ) {

    // Could be more than one set of files that need to be combined, so array.
    config.concat.styles.map( ( files ) => {
      mix.styles( files.src, files.dist );
    } …

为什么webpack.config.js不设置全局LESS变量的任何想法：current-vehicle定义于：/resources/scripts/theme.js？

/webpack.config.js

const merge = require("webpack-merge");
const path = require("path");
const baseConfig = require("laravel-mix/setup/webpack.config");

require('dotenv').config();

/**
 * Update the output directory and chunk filenames to work as expected.
 *
 * @param {object} config - The webpack config
 *
 * @return {object} The updated webpack config
 */
const addOutputConfiguration = config => {
  const publicPath = process.env.CDN_URL + '/js/';
  return merge(config, {
    output: {
      path: path.resolve(__dirname, "public/cdn/js"),
      publicPath,
      chunkFilename: "[name].js"
    },
    module: { …

这是使用 Docker。它在使用时有效wsl2，但在使用时hyper-v我遇到了问题。

我正在尝试运行mix watch -- --watch-options-poll=3000，mix --production但每次运行时都会遇到以下问题。

[webpack-cli] [错误：EEXIST：文件已存在，打开 '/var/www/html/public/website/images/e-side.png'] { errno：-17，
代码：'EEXIST'，系统调用： '打开'，路径：'/var/www/html/public/website/images/e-side.png' }

webpack.mix.js

const mix = require('laravel-mix');
const oldMix = require('laravel-mix');
const path = require('path');
const glob = require('glob');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');

//-- Website Mix --
mix.babelConfig({
   plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-optional-chaining'],
});

mix.webpackConfig({
    watchOptions: {
        ignored: /node_modules/
    },
    stats: {
        warnings: false,
    },
    output: {
        chunkFilename: 'website/js/chunks/[chunkhash].js',//replace with your path
    },
    resolve: {
        alias: {
            '@fonts': path.resolve(__dirname, 'resources/website/styles/fonts'), …

我刚刚在 MacOS 系统上更新了 Laravel 项目的 npm 包（很久以来我一直在 Laravel Homestead 上进行开发，但 npm 对我不起作用），

% npm list

% npm update -D

% npm list比较版本差异

% npm install

还有brew update和brew upgrade（在 MacOS 上）。

所以我现在得到了以下版本：

% npm -v：8.1.0

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @fortawesome/fontawesome-free@5.15.4\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @tailwindcss/forms@0.3.4\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 @tailwindcss/typography@0.4.1\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 alpinejs@3.4.2\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 axios@0.21.4\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 laravel-mix@6.0.35\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 lodash@4.17.21\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 postcss-import@14.0.2\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 postcss@8.3.11\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 resolve-url-loader@4.0.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 sass-loader@12.3.0\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 sass@1.43.4\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 sweetalert2@11.1.9\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 tailwindcss@2.2.17\n

当我运行时$ npm run dev没有任何反应，我收到以下消息：

% npm run dev\n\n> dev\n> npm run development\n\n\n> development\n> …

解决方案：

感谢 Karl 和 Ali，我现在可以使用alias'而无需创建单独的webpack.config.js文件。只需添加如下alias所示webpack.mix.js：

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

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css')
    .alias({'@': 'resources/'})
    .webpackConfig({resolve: {alias: {'@': path.resolve('resources/')}}})
    .vue();

问题：

从这篇文章中，我了解到您可以配置@路径来webpack.mix.js表示项目assets/resources中的文件夹vue/laravel，以便您可以@在路径中使用该符号。

mix.webpackConfig({
  resolve: {
    alias: {
      '@resources': path.resolve('resources'),
    },
  },
})

不幸的是，这会导致以下错误。

纱线运行v1.22.17 $ mix watch [webpack-cli] ReferenceError：路径未在对象处定义。(/Users/artur/PhpstormProjects/safa-ameedee.com/webpack.mix.js:16:21) 在 Module._compile (node:internal/modules/cjs/loader:1097:14) 在 Object.Module._extensions。 .js（节点：内部/模块/cjs/loader：1149：10）在Module.load（节点：内部/模块/cjs/loader：975：32）在Function.Module._load（节点：内部/模块/cjs） /loader:822:12) 在 Module.require (node:internal/modules/cjs/loader:999:19) 在 require (node:internal/modules/cjs/helpers:102:18) 在 module.exports (/Users) /artur/PhpstormProjects/safa-ameedee.com/node_modules/laravel-mix/setup/webpack.config.js:11:5) …

我有一个 laravel (inertia/vue) 应用程序（直到最近才使用 laravel-mix），其中包含我使用 pwa 构建器和工作箱构建的 pwa 功能。

随着laravel框架从laravel-mix改为vite，我迁移到vite，它的功能按预期工作，js和css被注入到应用程序入口页面的head元素中，vue页面按预期工作，在开发过程中，不会编译任何内容并将其注入到公共文件夹中，就像 laravel-mix/webpack 的情况一样。

我现在无法像以前一样让 PWA 功能正常工作。由于我不再使用 webpack/laravel-mix，我用这个插件替换了我正在使用的 webpack-workbox 插件：vite-plugin-pwa。

当我使用 laravel-mix 和 webpack-workbox 插件时，我只需指向 webpack 配置文件中的源 Service Worker 文件，并使用我想要的 Workbox 策略来构建最终的 Service Worker 文件，然后将其编译并放置在我的公共目录中文件夹以及其他已编译的 css 和 js 文件。

使用此 vite 插件，我的最终服务工作人员不会被编译并放置在公共目录中，因此应用程序无法发现服务工作人员。我收到 404 错误，并显示以下消息：“无法为范围注册服务工作线程...”，因为没有可用的服务工作线程文件。

我怀疑我没有以正确的方式配置或使用此插件，并且希望获得有关如何执行此操作或以其他方式解决此问题的帮助。

这是我的 vite.config.js 文件：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
        }),
        vue({
            template: { …