Cambiar el nombre de la carpeta src de un proyecto Vue CLI 3

El desafío de diseñar una buena herramienta CLI es equilibrar valores predeterminados razonables con la libertad de personalizar.

Una de las mejores herramientas CLI que conozco es Vue CLI 3. Uno de sus “valores predeterminados sensatos” es que los archivos de origen, por ejemplo, componentes sin compilar y archivos JavaScript, estarán en un directorio src.

Pero, ¿qué sucede si tiene sus propias estructuras de aplicaciones únicas que desea usar como MVC, o tal vez su propia convención que usa en todas sus bases de código, por lo que preferiría darle a la carpeta de origen un nombre diferente como view, app, client etc.

En esto Problema de GitHubun usuario preguntó cómo src puede ser renombrado a otra cosa.

La respuesta es que esto no es algo que se pueda hacer directamente. Como dijo Evan en su comentario final en la edición:

“No habrá una opción de primera clase para esto porque preferimos que todos los proyectos Vue CLI tengan una estructura de directorios estándar y consistente. Usar un nombre de directorio diferente es solo una cuestión de gusto personal, por lo que si insiste en cambiar eso, están por su cuenta”.

¿Dejar que los perros durmientes mientan?

Entonces, ¿por qué meterse con esto? Es solo un nombre de carpeta, ¿importa?

Esta fue la pregunta que tuve que hacerme al redactar mi curso de Enterprise Vue, que se centra en la creación de una aplicación Vue/Express de pila completa que incluye Vue CLI 3. Esta aplicación está estructurada de tal manera que incluye archivos de servidor/API en una subcarpeta de el andamio

Explico mis pensamientos sobre el uso de Vue CLI 3 para albergar una aplicación de pila completa en esta publicación anterior: Estructura de la aplicación de pila completa de Vue CLI 3.

Como un individualista acérrimo y un perfeccionista empedernido, descubrí que simplemente no podía dejar los archivos de origen del cliente en el nombre genérico src carpeta mientras que los archivos de origen del servidor estaban en el nombre más descriptivo server carpeta.

Cambiando el nombre de src se puede hacer si realmente cree que la integridad de la estructura de carpetas vale la pena por la dificultad que presenta, lo cual explicaré a continuación.

Configuración del paquete web

El problema principal con el que se enfrentará es que la configuración del paquete web bajo el capó de Vue CLI 3 tiene un código fijo src como el nombre del directorio de origen.

La configuración del paquete web es opaca en Vue CLI 3 por diseño, pero si necesita verla, puede usar el inspect dominio.

Mi consejo es escribirlo en un archivo y buscar usos de src.

$ vue inspect > webpack.txt

En una instalación típica de Vue CLI, verá dos instancias de srcuno en la sección de alias y otro en el archivo de entrada.

webpack.txt

{
...
  resolve: {
    alias: {
      '@': '/home/vagrant/app/src',
      ...
    },
    ...
  },
  ...
  entry: {
    app: [
      './src/main.js'
    ]
  }
}

Para cambiarlos, deberá crear o agregar al archivo de configuración de Vue y anular esta configuración de Webpack. me gusta usar el Cadena de paquetes web método para hacer esto declarativamente.

A continuación, se muestra cómo puede anular las reglas que codifican el src directorio y cámbielos a otra cosa:

ver.config.js

const path = require("path");

module.exports = {
  chainWebpack: config => {
    config
      .entry("app")
      .clear()
      .add("./client/main.js")
      .end();
    config.resolve.alias
      .set("@", path.join(__dirname, "./client"))
  }
};

Una vez hecho esto, al inspeccionar la configuración de Webpack nuevamente, verá src ha sido reemplazado:

webpack.txt

{
...
  resolve: {
    alias: {
      '@': '/home/vagrant/app/client',
      ...
    },
    ...
  },
  ...
  entry: {
    app: [
      './client/main.js'
    ]
  }
}

Problema resuelto… o no? Tenga en cuenta que todos los complementos de Vue CLI 3 asumirán src es la carpeta principal, así que prepárese para seguir modificando la configuración de manera similar cada vez que agregue un complemento.


Conviértase en un desarrollador sénior de Vue en 2020.

Aprenda y domine lo que saben los profesionales sobre la creación, prueba e implementación de aplicaciones Vue de pila completa en nuestro curso más reciente.

Aprende más


Similar Posts

Leave a Reply

Your email address will not be published.