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';