将项目放入子文件夹时，错误 laravel 混合重写 url 路径

Question

我已经在服务器上部署了 laravel React 应用程序，在一个名为 patients/ 的文件夹中，因此该应用程序的完整 URL 是域。com/patients

未找到

app.js 和 app.css 文件，我遇到 404 错误，因为它正在尝试从 domain.com/ 而不是域提供文件。com/patients/app.css 和域。com/patients/app.js 如果我将混合更改为资产或将混合放在 app.blade.php 中的资产内，那么所有其他资产如 0.js , 0.css 未找到,

以下是app.blade.php

中的代码

<!DOCTYPE html>
<html class="h-full bg-gray-200">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet">
    <script src="{{ mix('/js/app.js') }}" defer></script>
    <title>Clinical Laboratory | Provider Portal</title>
    @routes
</head>
<body class="font-sans leading-none text-gray-800 antialiased">

@inertia

</body>
</html>

以下是我的webpack.mix.js

const cssImport = require('postcss-import');
const cssNesting = require('postcss-nesting');
const mix = require('laravel-mix');
const path = require('path');
const purgecss = require('@fullhuman/postcss-purgecss');
const tailwindcss = require('tailwindcss');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
  .react('resources/js/app.js', 'public/js')
  .postCss('resources/css/app.css', 'public/css/app.css')
  .options({
    postCss: [
      cssImport(),
      cssNesting(),
      tailwindcss('tailwind.config.js'),
      ...(mix.inProduction()
        ? [
            purgecss({
              content: [
                './resources/views/**/*.blade.php',
                './resources/js/**/*.js'
              ],
              defaultExtractor: content =>
                content.match(/[\w-/:.]+(?<!:)/g) || [],
              whitelistPatternsChildren: [/nprogress/]
            })
          ]
        : [])
    ]
  })
  .webpackConfig({
    output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
    resolve: {
      alias: {
        '@': path.resolve('resources/js')
      }
    }
  })
  .version()
  .sourceMaps();

我也试过在最后添加mix.setResourceRoot('/laravel/public/');

Answer 1

经过一番努力，我能够解决问题，我做了以下更改

在.env中添加

APP_URL=http://localhost:8000

MIX_ASSET_URL=http://localhost:8000

并在config/app.php

中添加了以下代码

'mix_url' => env('MIX_ASSET_URL', null)

最后，我更新了 webpack.mix.js 并在 webpackConfig

的输出中添加了 public url

const cssImport = require('postcss-import');
const cssNesting = require('postcss-nesting');
const mix = require('laravel-mix');
const path = require('path');
const purgecss = require('@fullhuman/postcss-purgecss');
const tailwindcss = require('tailwindcss');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
  .react('resources/js/app.js', 'public/js')
  .postCss('resources/css/app.css', 'public/css/app.css')
  .options({
    postCss: [
      cssImport(),
      cssNesting(),
      tailwindcss('tailwind.config.js'),
      ...(mix.inProduction()
        ? [
            purgecss({
              content: [
                './resources/views/**/*.blade.php',
                './resources/js/**/*.js'
              ],
              defaultExtractor: content =>
                content.match(/[\w-/:.]+(?<!:)/g) || [],
              whitelistPatternsChildren: [/nprogress/]
            })
          ]
        : [])
    ]
  })
  .webpackConfig({
    output: { chunkFilename: 'js/[name].js?id=[chunkhash]', publicPath: '/patients/' },
    resolve: {
      alias: {
        '@': path.resolve('resources/js')
      }
    }
  })
  .version()
  .sourceMaps();

注意：public路径添加在 webpackconfig 的输出属性中。希望它能帮助其他人。谢谢

Answer 2

我在 blade 中更改它更容易...

asset() 将指向文件夹 patients/

然后减去 mix() 提供的散列并与资产连接 url。

<link rel="stylesheet" href="{{asset('/css/app.css?' . explode('?', mix('/css/app.css'))[1])}}">
<script src="{{asset('/js/app.js?' . explode('?', mix('/js/app.js'))[1])}}"></script>

将项目放入子文件夹时，错误 laravel 混合重写 url 路径

Wrong laravel mix rewrite url path when place project in subfolder

inertiajs

laravel

reactjs

webpack

laravel-mix