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文件夹，然后写道：

resources / 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
        }

Laravel中的Webpack别名混合到node_modules

1 个答案: