我已经在服务器上部署了laravel-react应用程序，位于一个名为patients/的文件夹中，因此该应用程序的完整URL是domain.com/patients
找不到app.js和app.css文件，我面临404错误，因为它试图从domain.com/而不是domain.com/patients/app.css和domain.com/patient/app.js提供文件。如果我将mix更改为asset或将mix放在app.blade.php中的asset内，则所有其他资产(如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/');
经过几次斗争，我能够解决这个问题，我做了以下更改
在.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的输出中添加了公共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();
注意：publicPath添加在webpackconfig的输出属性中。希望它能帮助其他人。感谢
在blade中更改它更容易。。。
asset((将指向文件夹，即patients/
然后只需减去mix((提供的hash，并与资产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>