vue-cli3配置路径别名

vue文件路径引用简写

当我们需要引用被多级文件夹嵌套的文件时，需要用到很多../../，使得引用路径看起来非常繁琐，这时我们可以采用简写模式

• 在build文件夹中找到webpack.base.conf.js，在找到resolve:{}对象

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

• 其中@就代表了src这个文件夹，我们可以根据需求在自定义其他文件夹的简写形式

  • 比较常见的assets、components文件夹，以及自定义的常用的views

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

• 示例：

  • 参考下图文件目录结构
    

  // 使用import引入组件时
  // 1. 原来
  import TabBar from "./components/tabbar/TabBar"
  
  // 2. 简写
  import TabBar from "components/tabbar/TabBar"
  

  <!-- 不是通过import引入时，比如通过src -->
  
  <!-- 1.原来 -->
  <img slot="item-icon" src="../../assets/img/home_page.svg" alt="">
  
  <!-- 2.简写 -->
  <img slot="item-icon" src="~assets/img/home_page.svg" alt="">
  

  • 对webpack.base.conf.js文件进行修改后，要重新启动项目npm run dev
  • 通过import和非import引入的区别：后者需要在前面加上~