绝对路径配置和图片资源引入

绝对路径配置

在vite.config.ts中配置绝对路径，通过@符来表示src下的资源路径

// vite.config.ts
import { defineConfig} from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path"; // 引入path
import { resolve } from "path"; // 引入path

export default defineConfig(({ mode }) => {
  return {
    plugins: [vue()],
    resolve: {
      // 配置别名
      alias: {
        "@": resolve(__dirname, "./src") // src资源绝对路径
      }
    },
  };
});

如果是TypeScript项目则还需要在tsconfig.json中配置：baseUrl、paths

{
  "compilerOptions": {
     // 省略其它配置...
      
    "baseUrl": "./",  // 配置根路径
    "paths": {
      "@/*": ["src/*"] // 配置绝对路径校验
    }
  },
  // 省略其它配置...
}

页面使用：直接import "@/xxxxxx"引入即可

import "@/style.css";
import App from "@/App.vue";
import router from "@/router/index";

图片资源路径

同样现在vite.config.ts中配置绝对路径，这里的绝对路径@assets为src目录下的assets文件夹

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置别名
    alias: {
      "@assets": path.join(__dirname, "src/assets")
    }
  },
});

在页面中引入图片资源：

<template>
  <img :src="tom" />
</template>

<script setup>
import tom from "@assets/tom.jpg";
</script>

背景图可以直接通过路径指向，不需要在script引入：

<template>
  <div class="container">
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.container {
  background: url("@assets/bgc/vice-city.png");
}
</style>