Laravel 混合：自定义 node_modules 路径

Question

当运行 npx mix时，我得到错误：

ERROR in ../src/js/components/TestComponent.vue?vue&type=template&id=0ac5fdef (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[2]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!../src/js/components/TestComponent.vue?vue&type=template&id=0ac5fdef) 1:0-126
Module not found: Error: Can't resolve 'vue' in '/var/www/project/src/js/components'

ERROR in ../src/js/app.js 1:0-32
Module not found: Error: Can't resolve 'vue' in '/var/www/project/src/js'

webpack compiled with 2 errors

我的文件夹结构如下：

buildchain
 - node_modules
 - package.json
 - tailwind.config.js
 - webpack.mix.js

cms
docker-config
src
  - js
    - app.js

app.js

import { createApp } from "vue";

import TestComponent from "./components/TestComponent.vue";

const app = createApp({
    components: {
      TestComponent
    }
  });
  
  app.mount("#app");

webpack.mix.js

// webpack.mix.js

let mix = require('laravel-mix');

let path = require('path');




mix.js("../src/js/app.js", "js")
    .vue()
    .postCss('../src/css/app.css', 'css', [
        require("tailwindcss"),
    ])
    .setPublicPath('../cms/web/assets')

如果我将 vue 导入更改为 import { createApp } from "../../buildchain/node_modules/vue";，错误消失，但仍然存在 TestComponent.vue。

如何才能让我的文件自动找到 node_modules 并正确导入？

编辑：

尝试过：

mix.webpackConfig({
    resolve: {
        modules: ['node_modules']
    }
});

但我仍然得到错误

Answer 1

我最终使用 Path 库解决了这个问题：

使用 npm 安装路径，然后将其包含在 webpack.mix.js 文件中：

let path = require('path');

变化：

mix.webpackConfig({
    resolve: {
        modules: ['node_modules']
    }
});

至：

.webpackConfig({
        resolve: {
            modules: [
                path.resolve(__dirname, 'node_modules')
            ]
        }
    })

webpack.mix.js:

mix.js("../src/js/app.js", "js")
    .vue()
    .postCss('../src/css/app.css', 'css', [
        require("tailwindcss"),
    ])
    .webpackConfig({
        resolve: {
            modules: [
                path.resolve(__dirname, 'node_modules')
            ]
        }
    })
    .setPublicPath('../cms/web/assets')

Laravel 混合：自定义 node_modules 路径

Laravel Mix: custom node_modules path

webpack

laravel-mix