vue.config.js中别名配置问题

最新推荐文章于 2025-06-30 21:10:39 发布

原创最新推荐文章于 2025-06-30 21:10:39 发布 · 2.6k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

收录于

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍在Vue CLI 4.2.2环境中配置文件路径别名的两种方法：传统方式通过configureWebpack属性直接设置，以及使用chainWebpack进行更灵活的路径别名配置。

. 在vue cli 4.2.2中两种都可以用
传统方法

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views',
      }
    }
  }
}

新方法

const path = require('path');//引入path模块
function resolve(dir){
  return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径
}
module.exports={
  chainWebpack:(config)=>{
    config.resolve.alias
        .set('@',resolve('./src'))
        .set('components',resolve('./src/components'))
        .set('views',resolve('./src/views'))
        .set('assets',resolve('./src/assets'))
        .set('common',resolve('./src/common'))
    //set第一个参数：设置的别名，第二个参数：设置的路径
  }
}