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?
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'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'), }, } })Esto es lo que funcionó para mí...
import vue from '@vitejs/plugin-vue' const path = require('path') export default { alias: { '/@': path.resolve(__dirname, './src') }, plugins: [vue()] } 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>Vue 3 Vite mecanografiado
vite.config.ts
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'), }, } }) Para eliminar advertencias y agregar pistas a las descargas con @/
tsconfig.json
{ "compilerOptions": { ... "paths": { "@/*": ["./src/*", "./dist/*"] } } }Vote a las personas a continuación también, excepto la respuesta del creador de la pregunta, por favor. Copió y pegó el formulario de respuesta de la persona que lo ayudó el mismo día que hizo la pregunta.
En mi Vite 2.7.x
import vue from '@vitejs/plugin-vue' import path from 'path' ... ... resolve: { alias: [ { find: '@', replacement: path.resolve(__dirname, './src') }, { find: '...', replacement: path.resolve(__dirname, '...') }, { find: '...', replacement: path.resolve(__dirname, '...') }, { find: '...', replacement: path.resolve(__dirname, '...') }, ] }Probé la mayoría de las soluciones anteriores y desafortunadamente no funcionó. Lo siguiente lo hizo.
En mi jsconfig.json
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } }y en mi vite.config.js
import { fileURLToPath } from "url"; import path from "path"; import { defineConfig } from "vite"; export default defineConfig({ resolve: { alias: { "@": path.resolve(path.dirname(fileURLToPath(import.meta.url)), "src"), }, }, });