Lapack中的Webpack别名为node_modules

Question

我想在Laravel 5.8项目中使用VUE.JS中的别名来导入我的模块中的css和js。

webpack.mix.js

mix.webpackConfig({
resolve: {
    alias: {
        'alias':  path.resolve(
            __dirname,
            '~myModule/src'
        )
     }
   }
});

在我的VUE App.js中，我想导入css文件夹，我写道：

资源/ JS / app.js

// css files
import 'alias/lib/css'

// js files
import 'alias/lib/script'

但我错了，因为别名没有解决：

./resources/js/app.js中的错误找不到模块：错误：无法在...中解析'alias / lib / css'

你能帮我解决这个问题吗？

Answer 1

经过这么多尝试，我得到了这个问题。代码很好但我缺少正确加载webpack.mix.js：

From Laravel Mix documentation:

webpack.mix.js文件是所有资产编译的入口点。可以把它想象成Webpack的轻量级配置包装器。可以将混合任务链接在一起，以准确定义应如何编译资产。

但是，如果您使用的是npm run watch，则在编译新的已更改资产之前不会（重新）加载它。这意味着：

如果您处于监视模式（npm run watch）退出并重新启动它以加载新更新的webpack.config.js（如果您更改它）。

最后它奏效了！它正确地解决了新的别名！

这是我在webpack.config.js中使用的最终配置：

mix.webpackConfig({
resolve: {
    alias: {
        'aliasName':  path.resolve(
            __dirname,
            'node_modules/MyModule/src/'
        )
     }
   }
});

另一种选择是：

mix.webpackConfig({
    resolve: {
        modules: [
            'node_modules'
        ],
        alias: {
            'aliasName' : 'MyModule/src/'
        }
    }
});

然后在我的Vue组件中（或在vue app.js中，以防万一）

 <template>

     <myModule-component></myModule-component>

 </template>

    require('aliasName/lib/css');      // to load full css directory
    require('aliasName/lib/script');   // to load full js directory

    import MyModuleComponent from 'aliasName/widgets/MyModuleComponent.vue'

    ...
    export default {
        ...
        components: {
           'myModule-component': MyModuleComponent
        }