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, '...') }, ] }