空白页面显示 laravel 和 vue

Question

信息

使用laravel和vue项目

1. 安装composer install和npm 安装后显示空白页面
2. Laravel 8，Vue vue @3.2.31，PHP 8和ubuntu 20
3. 项目位置/www/html/ project
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 run hot 也没有给出任何错误

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