webpack配置（Vue-cli4)

最新推荐文章于 2024-07-24 06:54:05 发布

原创最新推荐文章于 2024-07-24 06:54:05 发布 · 342 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在 Webpack 配置文件中设置别名，通过 `path.join(__dirname, dir)` 创建绝对路径，并使用 `module.exports.chainWebpack` 方法配置 `config.resolve.alias`，为 `components`, `assets`, `common`, `views` 目录设置快捷引用路径，简化项目导入语句。

1. 别名配置

const path = require('path'); // 引入path模块
function resolve(dir) {
    return path.join(__dirname,dir) //path.join(_dirname)设置绝对路径
}

module.exports = {
    chainWebpack:(config)=>{
        config.resolve.alias
            //第一个参数：别名 第二个参数：路径
            .set('components',resolve('src/components'))
            .set('assets',resolve('src/assets'))
            .set('common',resolve('src/common'))
            .set('views',resolve('src/views'))
    }
};