路径别名配置

chainWebpack

//vue.config.js
const path = require('path') // 引入path模块
module.exports = {
  // 路径别名配置
    chainWebpack: config => {
      config.resolve.alias
    // .set('别名',对应目录的绝对路径)
            .set('@',path.join(__dirname,'./src'))
        .set('c',path.join(__dirname,'./src/components'))
  }
}

// App.vue
<template>
  <div>
    <Tab/>
    <Tab2/>
  <img src="@/assets/img/1.jpeg" alt="">
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
// import Tab from './components/Tab.vue';
import Tab from 'c/Tab.vue'; // 使用路径别名c 引入c/Tab.vue子组件
import Tab2 from 'c/Tab2.vue'; // 同上
export default defineComponent({ 
  components:{ //通过components选项注册子组件
    Tab,Tab2
  }
}) 
</script>