vue-cli 3.0 中 vue.config.js 配置路径别名

 vue-cli 2.x 版本创建项目时,我们可以在 build 文件夹下找到 webpack.base.conf.js 文件,在里面修改 resolve.alias 即可

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

vue-cli 3.0 创建项目时,目录结构精简化,找不到 build 和 config 文件夹,那么该如何修改路径别名呢?

由于vue-cli 3.0 版本所有的配置项都放在了 vue.config.js 文件中,所以在里面进行配置就好了,代码如下:

const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)
}
// 项目的主要配置文件
module.exports = {
    // webpack 配置进行更细粒度的修改  https://cli.vuejs.org/zh/config/#chainwebpack
    chainWebpack: (config)=>{
        //修改文件引入自定义路径
        config.resolve.alias
            .set('@', resolve('src'))
            .set('style', resolve('src/assets/style'))
    }
}

配置好想用的路径别名后,重新启动项目,再引入文件时,使用别名即可

@import 'style/common/variables.scss';

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值