resolve

resolve.alias

---

resolve.alias 路径别名配置选项

配置

vite.config.js 配置

import Path from 'path';
import { defineConfig } from "vite"; 
import VuePlugin from "@vitejs/plugin-vue";


export default defineConfig({
    plugins:[VuePlugin()],
    resolve:{
        alias:{
            "@":Path.resolve(__dirname,"src")
        }
    }
})

App.vue 使用

<template>
    <img src="./assets/avatar.jpeg" alt="">
    <img :src="avatar" alt="">
    <HelloWordVue />
    <h3>{{ title }}</h3>
    <div><button @click="handleClick">点击{{num}}次</button></div>
</template>

<script setup>
    import { ref } from "vue";
    import HelloWordVue from "@/HelloWord.vue";
    import avatar from '@/assets/avatar.jpeg'

    const num = ref(0);
    const title = ref("Hello Word")

    const handleClick = () => {
        num.value++;
    }
</script>