Add the @ alias in Vite config

Author: bblanchon

src/App.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, computed, watch } from "vue"
 
-import AssistanceModal from "./components/AssistanceModal.vue"
-import TroubleshooterStep from "./components/TroubleshooterStep.vue"
+import AssistanceModal from "@/components/AssistanceModal.vue"
+import TroubleshooterStep from "@/components/TroubleshooterStep.vue"
 import { getSteps, generateReport } from "./troubleshooter"
 
 const sleep = (m: number) => new Promise((r) => setTimeout(r, m))

src/components/TroubleshooterStep.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { inject, onMounted, useTemplateRef } from "vue"
 
-import TroubleshooterStepOption from "./TroubleshooterStepOption.vue"
+import TroubleshooterStepOption from "@/components/TroubleshooterStepOption.vue"
 import type { Step } from "@/troubleshooter"
 
 const debug = inject<boolean>("debug")

vite.config.ts

@@ -1,6 +1,7 @@
 import { resolve } from "node:path"
+import { fileURLToPath, URL } from "node:url"
 
-import { defineConfig, Plugin } from "vite"
+import { defineConfig } from "vite"
 import Vue from "@vitejs/plugin-vue"
 import mdiAttrs from "markdown-it-attrs"
 import mdiHljs from "markdown-it-highlightjs"
@@ -27,6 +28,11 @@ export default defineConfig(({ mode }) => ({
   define: {
     "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
   },
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
   plugins: [
     Vue({
       include: [/\.vue$/, /\.md$/],