个人中心
gpt4 book ai didi

reactjs - 将项目放在子文件夹中时，laravel mix 重写 url 路径错误

转载 作者：行者123 更新时间：2023-12-05 00:44:51 26 4
gpt4 key购买 nike

我已经在服务器上部署了 laravel react 应用程序，在一个名为 patients/的文件夹内，所以该应用程序的完整 URL 是 domain.com/patients

app.js 和 app.css 文件未找到，我面临 404 错误，因为它试图从 domain.com/而不是 domain.com/patients/app.css 和 domain.com/提供文件patients/app.js 如果我将 mix 更改为 Assets 或将 mix 放在 app.blade.php 中的 Assets 内，则找不到 0.js、0.css 等所有其他 Assets ，

以下是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/');

最佳答案

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

在.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();

注意:webpackconfig 的 output 属性中添加了 publicPath。希望它可以帮助其他人。谢谢

关于reactjs - 将项目放在子文件夹中时，laravel mix 重写 url 路径错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65492953/

26 4 0
文章推荐： express - type-graphql 找不到模块 'class-validator' 异常
文章推荐： math - 是否可以创建允许 360 度旋转的四元数扭曲解决方案？
文章推荐： android - 如何在 android 中实现 Exoplayer 2.11.1？
文章推荐： reactjs - 使用 React 片段时修复 "unique ' key' prop"错误