vue cli3 配置路径别名

vue cli3 配置路径别名

使用vue-clli3 搭建的Vue 项目，没有build 目录，如果想要添加配置，可以在vue.config.js 中添加。

项目中会配置一个路径别名，方便引用，不用写那么长。

• 示例

  // 配置路径别名前
  import Home from '../../views/Home'
  
  // 配置路径别名后('views': '../../views')
  import Home from 'views/Home'
  

有两种配置的方法（如果项目根目录下没有vue.config.js 文件，就自己新建一个）：

• 配置一

  module.exports = {
    configureWebpack: {
      resolve: {
        alias: {
          // '@' 是 './src' 的别名，vue-cli 默认配置
          'assets': '@/assets',
          'components': '@/components',
          'network': '@/network',
          'views': '@/views'
        }
      }
    }
  }
  

• 配置二

  const path = require('path');
  function resolve(dir) {
    // 设置绝对路径
    return path.join(__dirname, dir)
  }
  
  module.exports = {
    chainWebpack: (config) => {
      config.resolve.alias
        // set(别名, 路径)
        .set('@', resolve('./src'))
        .set('network', resolve('./src/network'))
    }
  }
  

• 注意

  vue.config.js 中的配置覆盖脚手架的自定义配置

• 参考文档

  https://segmentfault.com/a/1190000019920162