vue-cli3配置路径别名

vue文件路径引用简写

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

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

    resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
        'vue$': 'vue/dist/vue.esm.js',
        '@': resolve('src'),
      }
    },
    
  • 其中@就代表了src这个文件夹,我们可以根据需求在自定义其他文件夹的简写形式

    • 比较常见的assetscomponents文件夹,以及自定义的常用的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')
      }
    },
    
  • 示例:

    • 参考下图文件目录结构
      vue-cli3配置路径别名
    // 使用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引入的区别:后者需要在前面加上~
上一篇:vue-cli3.x项目使用tinymce富文本编辑器


下一篇:vue cli3创建项目?