0Pricing
Vue Academy · Lección

Configuración y plugins de CLI

Configure la CLI y añada plugins para ampliar su proyecto

Configuración y plugins de CLI es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.

Configuración de la compilación

Tanto Vue CLI como Vite le permiten personalizar la compilación mediante un archivo de configuración.

  • Vue CLI usa vue.config.js
  • Vite usa vite.config.js

Aquí puede añadir plugins, definir alias, configurar el servidor de desarrollo y mucho más.

Conceptos básicos de vite.config.js

Un archivo vite.config.js habitual importa el plugin de Vue y exporta un objeto de configuración.

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000
  }
})

Conceptos básicos de vue.config.js

En los proyectos de Vue CLI, vue.config.js exporta la configuración de la misma forma.

const { defineConfig } = require("@vue/cli-service")

module.exports = defineConfig({
  devServer: {
    port: 8080
  }
})

Añadir plugins

Los plugins amplían la compilación con nuevas capacidades.

  • Instálelos con npm
  • Impórtelos en el archivo de configuración
  • Añádalos a la matriz de plugins
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import vueJsx from "@vitejs/plugin-vue-jsx"

export default defineConfig({
  plugins: [vue(), vueJsx()]
})

Variables de entorno

Guarde en archivos .env la configuración que cambia entre entornos.

  • .env se carga en todos los entornos
  • .env.development se usa solo durante el desarrollo
  • .env.production se usa para las compilaciones de producción

Definición de variables de entorno

En Vite, las variables deben llevar el prefijo VITE_ para estar disponibles en el código del cliente.

# .env file
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

Lectura de variables de entorno

Acceda a las variables expuestas mediante import.meta.env en Vite.

const apiUrl = import.meta.env.VITE_API_URL
console.log(apiUrl)
// https://api.example.com

Nota de seguridad sobre las variables de entorno

Cualquier elemento expuesto al código del cliente es visible en el navegador.

  • No incluya nunca secretos, como claves privadas de API, en las variables VITE_
  • Aquí solo debe incluirse configuración pública y no confidencial
  • Mantenga los secretos reales en el servidor

Alias de rutas

Un alias acorta las rutas de importación. El más habitual asigna @ a la carpeta src.

Así se evitan rutas relativas frágiles como ../../components.

import { fileURLToPath, URL } from "node:url"
import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  }
})

Uso del alias

Una vez configurado, importe desde @/ en lugar de usar rutas relativas.

// Without alias
import Button from "../../components/Button.vue"

// With @ alias
import Button from "@/components/Button.vue"

Opciones del servidor de desarrollo

El archivo de configuración también permite ajustar el servidor de desarrollo:

  • port indica en qué puerto se escuchan las solicitudes
  • open abre automáticamente el navegador
  • proxy reenvía las solicitudes de API para evitar CORS
export default defineConfig({
  server: {
    port: 3000,
    open: true,
    proxy: {
      "/api": "http://localhost:8000"
    }
  }
})

Comprobación rápida

Compruebe cuánto entiende sobre la configuración de Vite.

Resumen: configuración y plugins

Ha aprendido a configurar un proyecto de Vue:

  • vite.config.js o vue.config.js contienen la configuración
  • Añada plugins a la matriz de plugins
  • Use archivos .env con el prefijo VITE_
  • Léalas mediante import.meta.env
  • Defina el alias @ para conseguir importaciones más claras

A continuación: sintaxis de plantillas y vinculación de datos.

Preguntas frecuentes

¿La lección «Configuración y plugins de CLI» es gratis?

Sí — el texto completo de «Configuración y plugins de CLI» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.

¿Qué aprenderé en «Configuración y plugins de CLI»?

Configure la CLI y añada plugins para ampliar su proyecto Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Vue Academy?

No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.

¿Cuánto tiempo toma la lección «Configuración y plugins de CLI»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Vue Academy?

Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Instalación de Vue CLI
  2. Estructura del proyecto generado
  3. Configuración y plugins de CLI
← Volver a Vue Academy