空白页显示laravel和vue

Question

信息

使用laravel和vue项目

1. 安装composer install和npm install
2. Laravel 8，Vuevue@3.2.31、PHP 8和ubuntu 20
3. 项目位置/www/html/项目
4. 使用php artisan serve启动项目
5. "网络"选项卡http://127.0.0.1:8000/显示状态200，但在预览选项卡中

错误

没有警告和控制台错误。"网络"选项卡http://127.0.0.1:8000/显示状态200，但在下面的预览选项卡中出现错误，给出

There was a problem loading your site type details

代码

Webpack.mix.js

const plugins = [
require('postcss-import'),
require('tailwindcss'),
require('postcss-nested'),
require('autoprefixer')
];
mix
.webpackConfig({
resolve: {
alias: {
'@': __dirname + '/resources/js'
}
}
})
.js('resources/js/project/app.js', 'public/js').vue().version()
.js('resources/js/_default/admin.js', 'public/js').vue().version()
.postCss('resources/css/app.css', 'public/css', plugins)
.postCss('resources/css/admin.css', 'public/css', plugins)
.sass('resources/css/admin/bootstrap.custom.scss', 'public/css')
//.browserSync('127.0.0.1:8000')
//mix.dumpWebpackConfig();
if (mix.inProduction()) {
mix.version();
}

package.json

{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.2.20",
"autoprefixer": "^10.4.0",
"axios": "^0.21",
"browser-sync": "^2.27.7",
"browser-sync-webpack-plugin": "^2.3.0",
"laravel-mix": "^6.0.0-beta.17",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.3.11",
"postcss-import": "^12.0",
"postcss-nested": "^4.2",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.1.1",
"tailwindcss": "^2.2.19",
"vue": "^3.2.20",
"vue-loader": "^16.8.2",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"@headlessui/vue": "^1.4.1",
"@heroicons/vue": "^1.0.5",
"@tailwindcss/forms": "^0.3.4",
"bootstrap": "^4.6.1",
"formiojs": "^4.13.11",
"install": "^0.13.0",
"npm": "^8.1.1",
"or": "^0.2.0",
"vue-i18n": "^8.26.5",
"vue-router": "^4.0.12",
"webpack-shell-plugin-next": "^2.2.2"
}
}

我不知道这个项目出了什么问题，我尝试删除node_modules和npm安装，但仍然得到了相同的错误，npm运行热也没有给出任何错误

Answer 1

const path = require('path');

mix.js(['resources/js/app.js','resources/js/_default/admin.js'], "public/js")
.vue()
.postCss(['resources/css/app.css', 'resources/css/admin.css'], "public/css", plugins)
.sass('resources/css/admin/bootstrap.custom.scss', 'public/css')
.webpackConfig({
resolve: {
alias: {
'@': path.resolve('resources/js'),
},
},
};);

if (mix.inProduction()) {
mix.version();
}