我在使用 Midone 的 Laravel 8 应用程序中收到错误运行 npm watch - Vuejs 3 管理仪表板模板

Question

正在尝试安装 Midone - Vuejs 3 管理仪表板模板 + HTML 版本 + XD 设计文件（HTML 版本）来自 https://themeforest.net/item/midone-vuejs-admin-dashboard-template/28123408 在新的 Laravel 8 / inertiajs/vuejs3 应用程序 / inertia-vue3 应用程序中

我阅读了如何在 Laravel 8 / app 下安装 Midone 的说明 https://themeforest.net/item/midone-vuejs-admin-dashboard-template/28123408/comments?page=14

在 webpack.mix.js 文件中提到的行：

  .js("resources/app/main.js", "public/dist/js")

我没有任何 resources/app/main.js 文件，但我有 resources/js/app.js 代码：

require('./bootstrap');

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';

const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

InertiaProgress.init({ color: '#4B5563' });

所以我在 webpack.mix.js 中尝试使用这个文件 :

const mix = require("laravel-mix");
const tailwindcss = require("tailwindcss");

const path = require('path'); //add this

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.alias({
    "@": path.join(__dirname, "resources/app"),
    "~": path.join(__dirname, "node_modules"),
});

mix
    .js('resources/js/app.js', 'public/js').vue()
    // .js("resources/app/main.js", "public/dist/js")
    // .vue()
    .sass("resources/app/assets/sass/app.scss", "public/dist/css")
    .options({
        processCssUrls: false,
        postCss: [tailwindcss("./tailwind.config.js")],
    })
    .autoload({
        "cash-dom": ["cash"],
        "@popperjs/core": ["Popper"],
    })
    .browserSync({
        proxy: "midone-vue-laravel.test",
        files: ["resources/**/*.*"],
    });

我不确定它的正确方法？上面的说明与我在我的新应用程序中看到的有所不同。
我尝试运行 npm watch，但我遇到了很多错误：

master@master-laptop:/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited$ npm 运行 watch-poll

@ watch-poll /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited mix watch -- --watch-options-poll=1000

✖ 混合在 2.77s
中编译有一些错误
错误./resources/js/Pages/API/Index.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index。 js??ruleSet[0].use[0]!./resources/js/Pages/API/Index.vue?vue&type=script&lang=js) 2:0-71 找不到模块：错误：无法解析 '/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/resources/js/Pages/API'
中的 '@/Pages/API/Partials/ApiTokenManager.vue'
错误./resources/js/Pages/API/Index.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index。 js??ruleSet[0].use[0]!./resources/js/Pages/API/Index.vue?vue&type=script&lang=js) 3:0-48 找不到模块：错误：无法解析 '/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/resources/js/Pages/API'
中的 '@/Layouts/AppLayout.vue'
./resources/js/Pages/API/Partials/ApiTokenManager.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/API/Partials/ApiTokenManager.vue?vue&type=script&lang=js) 2:0-61 找不到模块：错误：无法在“/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/resources/js/Pages/API/Partials”
中解析“@/Jetstream/ActionMessage.vue”
... 错误./resources/js/Pages/Auth/ConfirmPassword.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[ 0].use[0]!./resources/js/Pages/Auth/ConfirmPassword.vue?vue&type=script&lang=js) 3:0-71 找不到模块：错误：无法在“/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/resources/js/Pages/Auth”
中解析“@/Jetstream/AuthenticationCard.vue”
./resources/js/Pages/Auth/ConfirmPassword.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index 中出现错误。 js??ruleSet[0].use[0]!./resources/js/Pages/Auth/ConfirmPassword.vue?vue&type=script&lang=js) 4:0-79 找不到模块：错误：无法在“/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/resources/js/Pages/Auth”
中解析“@/Jetstream/AuthenticationCardLogo.vue”
./resources/js/Pages/Auth/ConfirmPassword.vue?vue&type=script&lang=js (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/index 中出现错误。 js??ruleSet[0].use[0]!./resources/js/Pages/Auth/ConfirmPassword.vue?vue&type=script&lang=js) 5:0-47 找不到模块：错误：无法在“/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/resources/js/Pages/Auth”
中解析“@/Jetstream/Button.vue”
... ./resources/js/Pages/Welcome.vue?vue&type=style&index=0&id=317d1a6e&scoped=true&lang=css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-9.use[1]!./node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-9.use[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Welcome.vue?vue&type=style&index=0&id=317d1a6e&scoped=true&lang=css) 模块构建失败（来自 ./node_modules/postcss-loader/dist/cjs.js）：错误：找不到模块“@left4code/tw-starter/dist/js/colors” 需要堆栈：
- /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/tailwind.config.js
- /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/tailwindcss/lib/lib/setupTrackingContext.js
- /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/tailwindcss/lib/index.js
- /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/webpack.mix.js
- /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/laravel-混音/设置/webpack.config.js
- /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack-cli/lib/webpack-cli.js
- /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack-cli/lib/bootstrap.js
- /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack-cli/bin/cli.js
- /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack/bin/webpack.js 在 Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) 在 Function.Module._load (internal/modules/cjs/loader.js:746:27) 在 Module.require (internal/modules/cjs/loader.js:974:19) 在要求 (internal/modules/cjs/helpers.js:93:18) 在对象。 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/tailwind.config.js:1:23) 在 Module._compile (internal/modules/cjs/loader.js:1085:14) 在 Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) 在 Module.load (internal/modules/cjs/loader.js:950:32) 在 Function.Module._load (internal/modules/cjs/loader.js:790:12) 在 Module.require (internal/modules/cjs/loader.js:974:19)
  
  错误在 ./resources/app/assets/sass/app.scss 模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）： ModuleBuildError：模块构建失败（来自 ./node_modules/sass-loader/dist/cjs.js）： SassError：找不到要导入的样式表。 ╷ 13 │ @import "顺风"; │ ^^^^^^^^^^ ╵ resources/app/assets/sass/app.scss 13:9 根样式表在 processResult (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack/lib/NormalModule.js:751:19) 在 /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack/lib/NormalModule.js:853:5 在 /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/loader-运行ner/lib/LoaderRunner.js:399:11 在 /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/loader-运行ner/lib/LoaderRunner.js:251:18 在 context.callback (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/loader-运行ner/lib/LoaderRunner.js:124:13) 在 /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass-loader/dist/index.js:54:7 在 Function.call$2 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:98996:16) 在 render_closure1.call$2 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:84511:12) 在 _RootZone.runBinary$3$3 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:29540:18) 在 _FutureListener.handleError$1 (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:28062:21)
  
  1 个子编译错误（使用 'stats.children: true' resp. '--stats-children' 了解更多详情） webpack 编译出现 101 个错误
  
  ● 混合 █████████████████████████ 缓存（99%）存储构建依赖项
  
  [Browsersync] 代理：http://midone-vue-laravel.test [浏览器同步] 访问 URL：
  
  本地：http://localhost:3000 外部：http://213.109.234.130:3000
  
  UI: http://localhost:3001 UI 外部：http://localhost:3001
  
  [Browsersync] 正在观看文件...

我想是不是配置不正确？

我需要解决什么问题？

修改块 #1:

我在 webpack.mix.js 中修改了别名的路径并添加了 @left4code/tw-starter 包，但是下一个运行ning npm 运行命令我得到错误：

> @ watch-poll /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited
> mix watch -- --watch-options-poll=1000


✖ Mix
  Compiled with some errors in 3.55s


warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.

● Mix █████████████████████████ done (99%)  
 plugins

ERROR in ./resources/app/assets/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
13 │ @import "tailwind";
   │         ^^^^^^^^^^
   ╵
  resources/app/assets/sass/app.scss 13:9  root stylesheet
    at processResult (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack/lib/NormalModule.js:751:19)
    at /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/webpack/lib/NormalModule.js:853:5
    at /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass-loader/dist/index.js:54:7
    at Function.call (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:98996:16)
    at render_closure1.call (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:84511:12)
    at _RootZone.runBinary (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:29540:18)
    at _FutureListener.handleError (/mnt/_work_sdb8/wwwroot/lar/AdsMdnAdminarea/AdsMdnAdminarea_Inited/node_modules/sass/sass.dart.js:28062:21)

是的，我在 resources/app/assets/sass/app.scss 的第 13 行：

@import "tailwind";

我也有

"@tailwindcss/forms": "^0.4.0",
"@tailwindcss/typography": "^0.5.0",
 "tailwindcss": "^3.0.0",

软件包已安装

我在 npm 运行命令中看到关于 Tailwind 的警告。我该如何解决？我错过了一些步骤吗？

修改块#2： 在 webpack.mix.js 之后，我修改了行：

.sass("resources/app/sass/app.scss", "public/dist/css")

我收到错误：

ERROR in ./resources/app/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
69 │ @import "/left4code/tw-starter/dist/js/breakpoint";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

正在检查文件 resources/app/sass/app.scss 我看到行

@import "~@left4code/tw-starter/dist/scss/breakpoint";

在/node_modules/@left4code/tw-starter下我没有找到任何断点文件。

我用断点注释行并得到下一个错误：

ERROR in ./resources/app/sass/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
63 │ @import "~@left4code/tw-starter/dist/js/accordion";

我找到文件 /node_modules/@left4code/tw-starter/dist/js/accordion.js

因为我定义了别名:

alias: {
    "@" : path.resolve(__dirname, 'resources/js'), // adjusted resources/app to resources/js
    "~": path.join(__dirname, "node_modules")
}

我试图将 resources/app/sass/app.scss 中的行修改为：

@import "~left4code/tw-starter/dist/js/accordion";

但我收到错误消息，无论如何都找不到...

我从 https://github.com/flydev-fr/midone_adminarea 上传了一个项目，但在尝试上传时遇到了同样的错误运行 npm 运行 watch-poll 命令...

提前致谢！

Answer 1

编辑后的答案：

一些包丢失，一些其他版本不匹配。请检查主要问题列表 （您可以在 github 上检查提交）:

观看次数在 resources/js，而不是 resources/app
alias配置错误
您需要软件包 @left4code/tw-starter 版本 2.3.1
您必须将 TailwindCSS v3 降级到 TailwindCSS v2
需要为自定义变量配置tailwind.config.js
PostCSS也需要配置
需要在 css 中修复图像路径（使用绝对路径并将图像放在 public 文件夹中）

我已经更新了 repo。

结果

yarn prod

原回答

您的 webpack.mix.js 配置中的 alias 无法正常工作，这就是您收到大量 导入错误的原因.

您只需向 webpack.mix.js 添加以下内容：

    .webpackConfig({
        resolve: {
            alias: {
              "@" : path.resolve(__dirname, 'resources/js'), // adjusted resources/app to resources/js
              "~": path.join(__dirname, "node_modules")
            }
        }
    })

完整配置：


mix
    .webpackConfig({
        resolve: {
            alias: {
              "@" : path.resolve(__dirname, 'resources/js'), // adjusted resources/app to resources/js
              "~": path.join(__dirname, "node_modules")
            }
        }
    })
    .js('resources/js/app.js', 'public/js').vue()
    // .js("resources/app/main.js", "public/dist/js")
    // .vue()
    .sass("resources/app/sass/app.scss", "public/dist/css") // adjusted  resources/assets/app/sass/app.scss to resources/app/sass/app.scss
    .options({
        processCssUrls: false,
        postCss: [tailwindcss("./tailwind.config.js")],
    })
    .autoload({
        "cash-dom": ["cash"],
        "@popperjs/core": ["Popper"],
    })
    .browserSync({
        proxy: "midone-vue-laravel.test",
        files: ["resources/**/*.*"],
    });

从您的 css 导入 tailwind 时，您最终会遇到错误，但要修复它，您需要安装缺少的包 @ left4code/tw-starter 和 yarn add @left4code/tw-starter and/or 直接要求卖家支持使用他的包的最新版本，该包是 6 小时前从这个答案更新的。

分叉：https://github.com/flydev-fr/midone_adminarea

我在使用 Midone 的 Laravel 8 应用程序中收到错误 运行 npm watch - Vuejs 3 管理仪表板模板

I got errors running npm watch in Laravel 8 app with Midone - Vuejs 3 Admin Dashboard Template

inertiajs

laravel

vuejs3

[Browsersync] 代理：http://midone-vue-laravel.test [浏览器同步] 访问 URL：

本地：http://localhost:3000 外部：http://213.109.234.130:3000

UI: http://localhost:3001 UI 外部：http://localhost:3001

编辑后的答案：

结果

原回答

我在使用 Midone 的 Laravel 8 应用程序中收到错误运行 npm watch - Vuejs 3 管理仪表板模板