He instalado el proyecto con vue3 - vite importando un componente como
import Component from '../../../../components/Component.vue'solo quiero crear un alias para la carpeta src y hacer
import Component from '@/components/Component.vue'este es mi vite.config.js
import vue from '@vitejs/plugin-vue' /** * https://vitejs.dev/config/ * @type {import('vite').UserConfig} */ export default { plugins: [ vue({ template: { compilerOptions: { // ... } } }) ] }¿Me estoy perdiendo de algo? ¿Que más deberia hacer?
En el archivo vite.config.js , escriba los siguientes bloques de código
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path' export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, './src'), }, } }) Esta solución viene por defecto al crear un nuevo proyecto con npm init vue@latest
import { fileURLToPath, URL } from "url"; import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { "@": fileURLToPath(new URL("./src", import.meta.url)), }, }, }); En componentes use @/ :
<script setup> import HelloWorld from "@/components/HelloWorld.vue"; </script>Esto es lo que funcionó para mí:
import path from 'path' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { '@/': `${path.resolve(__dirname, 'src')}/` } } })Luego en componentes:
<template> <img alt="Vue logo" src="./assets/logo.png" /> <HelloWorld msg="Hello Vue 3 + Vite" /> </template> <script> import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld } } </script>A diferencia de webpack , Vite no tiene un alias @ en src de forma predeterminada. Hay una discusión sobre esto en el siguiente número: https://github.com/vitejs/vite/issues/279
En última instancia, debe crear un alias:
// vite.config.js module.exports = { alias: { '/@': path.resolve(__dirname, './src') } } // Your config export default { alias: { '/@': path.resolve(__dirname, './src') }, plugins: [ ... ] } Entonces necesita usar /@ en sus archivos, por ejemplo:
import foo from '/@foo'