Haf*_*diq 4 inertiajs laravel reactjs webpack laravel-mix
我已经在服务器上部署了 Laravel React 应用程序，位于一个名为患者/的文件夹内，因此该应用程序的完整 URL 是domain.com/患者
找不到 app.js 和 app.css 文件，我面临 404 错误，因为它试图从domain.com/而不是domain.com/病人/app.css和domain.com/病人/app提供文件.js 如果我将 mix 更改为 asset 或将 mix 放入 app.blade.php 中的 asset 中，则找不到所有其他 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/');在最后添加
Haf*_*diq 10
经过一番努力，我能够解决问题，我做了以下更改
在.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 并在输出中添加了公共 urlwebpackConfig
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 的输出属性中添加了 publicPath。希望它对其他人有帮助。谢谢
| 归档时间： |
|
| 查看次数： |
7006 次 |
| 最近记录： |