Блог

Главная - Вопросы по программированию - Неправильный набор laravel переписывает URL-путь при размещении проекта во вложенной папке

Неправильный набор laravel переписывает URL-путь при размещении проекта во вложенной папке

#reactjs #laravel #webpack #laravel-mix #inertiajs

#reactjs #laravel #webpack #laravel-mix #инерция

Вопрос:

Я развернул приложение 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 на asset или помещу mix внутри asset в 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/'); в конце

Комментарии:

1. попробуйте отредактировать базовый URL-адрес mix, чтобы он соответствовал domain.com/patients / custom-mix-base-urls или MIX_BASE_URL в вашем .env файле

2. Спасибо за ваш ответ, теперь мой app.css и app.js загружаются только проблема с скомпилированным ресурсом, таким как 0.js 1.js и т.д., есть какое-либо решение для этого?

Ответ №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 и добавил общедоступный URL-адрес в вывод webpackConfig 

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

Примечание: publicPath добавляется в свойство вывода webpackconfig. Надеюсь, это поможет кому-нибудь еще. Спасибо

Ответ №2:

Мне проще изменить его в блейде…

asset() будет указывать на папку, а именно на пациентов/

затем просто вычтите хэш, который предоставляет 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>