[Vite] Vite Alias & static assets

 

In vite.config.ts

    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
        "@assets": path.resolve(__dirname, "src/assets"),
      },
    },

 

tsconfig.json

  "compilerOptions": {
    "baseUrl": "./",
    // order matter
    "paths": {
      "@assets/*": ["src/assets/*"],
      "@/*": ["src/*"],
    },
    ...
  }

 

App.vue

// import NotFound from './views/404.vue';
import NotFound from '@/views/404.vue';

 

https://cn.vitejs.dev/guide/assets.html#importing-asset-as-url

https://cn.vitejs.dev/config/build-options#build-assetsdir

<template>
  <div class="season">
    <button class="btn-primary" @click="handleChange" value="spring">春</button>
    <button class="btn-primary" @click="handleChange" value="summer">夏</button>
    <button class="btn-primary" @click="handleChange" value="autumn">秋</button>
    <button class="btn-primary" @click="handleChange" value="winter">冬</button>
  </div>

  <div class="card">
    <!-- <img src="@/assets/summer.jpg" alt=""> -->
    <!-- <img :src="spring" alt=""> -->

    <!-- 使用import动态导入的方式 -->
    <!-- <img :src="imgPath" alt=""> -->

    <!-- 使用new URL的方式处理 -->
    <img :src="url" alt="">
  </div>
</template>

<script setup lang="ts">
import { ref,computed } from 'vue'
// import spring from "@/assets/spring.jpg";

// Error: 直接引入变量的方式是没有效果的，vite并不会帮我们去解析路径
// const spring = ref('/src/assets/spring.jpg');

// import spring from '@/assets/spring.jpg';
// const imgPath = ref(spring);
// const handleChange = (e:Event) => { 
//   const v = (e.target as HTMLButtonElement).value;
//   import(`@/assets/${v}.jpg`).then((res) => { 
//     console.log(res);
//     imgPath.value = res.default;
//   })
// }

// 使用new URL的方式处理变量的静态资源路径
const imgPath = ref('spring');
    
// 计算属性处理URL地址
const url = computed(() => { 
  const href = new URL(`../assets/${imgPath.value}.jpg`, import.meta.url).href;
  console.log("🚀 ~ href:", href)
  return href;
})
    
// 事件切换路径字符串
const handleChange = (e:Event) => { 
  const v = (e.target as HTMLButtonElement).value;
  imgPath.value = v;
}
</script>

 

<template>
  <div v-html="rocketSvgRaw" class="svg-container"></div>
</template>

<script setup lang="ts">
import rocketSvgRaw from '@/assets/rocket.svg?raw';
</script>

<style lang="scss">
.svg-container svg{
  width: 100px;
  height: 100px;
  fill: #f00;
  &:hover{
    fill: #0f0;
  }
}
</style>