varias páginas en Vue.js CLI

No dudes en divulgar nuestros tutoriales y códigos con otro, apóyanos para ampliar esta comunidad.

Solución:

Primero: lee siempre la documentación oficial. Con Vue puede construir un SPA y un MPA tampoco es un problema. Solo sigue las guías:

• https://cli.vuejs.org/
• https://cli.vuejs.org/guide/html-and-static-assets.html#construir-una-aplicación-de-varias-páginas
• https://cli.vuejs.org/config/#pages

Debe crear un nuevo proyecto con Vue CLI 3. Una vez que haya creado su proyecto, configúrelo para que se configure manualmente. Asegúrese no elige la opción SPA. Vue luego creará un buen proyecto de “inicio” utilizando un enfoque MPA. Después de eso, simplemente repita la configuración en vue.config.js.

---

Actualizado # 1

Parece que algunas actualizaciones en Vue Cli han cambiado la forma de crear una aplicación MPA, así que:

• Crear una nueva aplicación vue create test
• Elija Configuración manual

El modelo creado será para un SPA. Así que haz los siguientes cambios:

• Crear una carpeta debajo src llamado pages (Opcional)

• En esta carpeta cree sus propias páginas: Inicio, Acerca de, etc.

• Copie y pegue App.vue y main.js desde src, en sus nuevas carpetas: Inicio, etc.

• Formatear el App.vue en estas carpetas, a su gusto.

• Cree un vue.config.js y configúrelo así: https://cli.vuejs.org/config/#pages

A continuación, tengo tres imágenes que demuestran esto:

• Primero: una aplicación nueva y fresca
• Segundo: esta misma aplicación, con los cambios que hice arriba
• Tercero: el vue.config.js de esta aplicación

tu no necesitar para crear el pages carpeta, esto es solo para tener una idea.

Enlace a GitHub: creación de una aplicación MPA

EDITAR: Vue tiene esto incorporado. Salta al final para más.

Respuesta original:

Hay dos formas de interpretar su pregunta y, por lo tanto, de responderla.

La primera interpretación es: “¿cómo puedo admitir el enrutamiento a diferentes páginas dentro de la misma aplicación de una sola página, por ejemplo, localhost: 8080/about y localhost: 8080/report, etc.?”. La respuesta a esto es usar el enrutador. Es razonablemente sencillo y funciona bien.

La segunda interpretación es: “mi aplicación es compleja y tengo varias aplicaciones de una sola páginapor ejemplo, una aplicación para la parte del ‘sitio web’, una aplicación para que los consumidores inicien sesión y trabajen, una aplicación para administradores, etc. ¿Cómo puede vue hacer esto sin crear tres repositorios completamente separados?”

La respuesta a esto último es un repositorio único con múltiples aplicaciones de una sola página. Esta demostración se parece exactamente a lo que buscas:

https://github.com/Plortinus/vue-multiple-pages/

Mire en particular: https://github.com/Plortinus/vue-multiple-pages/blob/master/vue.config.js

Respuesta actualizada:

Resulta que vuejs tiene la idea de múltiples páginas de nivel superior incorporadas. Quiero decir, tiene sentido: va a ser muy común, a pesar de lo que dicen muchas respuestas incorrectas sobre “no, es para aplicaciones de una sola página”.

Quiere que el pages opción en el vue.config.js expediente:

https://cli.vuejs.org/config/#pages

Si su proyecto no tiene ese archivo en el directorio raíz, créelo y vuejs lo descubrirá.

Hay una forma larga y otra corta de definir cada página. Usé la forma corta aquí:

module.exports = 
  pages: 
    index: 'src/pages/index/main.ts',
    experiment: 'src/pages/experiment/main.ts'
  

No tienes que poner tu trabajo en “páginas”. Podría ser “/src/apps/index/index.ts” o lo que sea.

Después de mover el código y cambiar algunas importaciones de:

import HelloWorld from './components/HelloWorld'

para

import HelloWorld from '@/components/HelloWorld'

La aplicación funciona, pero la aplicación “experimento” en mi repositorio tuvo que cargarse así:

http://localhost:8080/experiment.html

Bastante feo, y peor aún porque usa el enrutador que resultó en URL como:

http://localhost:8080/experiment.html/about

Puaj.

Afortunadamente, esta respuesta de stackoverflow lo resolvió. Actualizar el vue.config.js archivo a incluir devServer opciones (asegúrese de que esté en el nivel superior del objeto exportado:

devServer: 
  historyApiFallback: 
    rewrites: [
       from: //index/, to: '/index.html' ,
       from: //experiment/, to: '/experiment.html' 
    ]
  

Luego modifique también el router.ts archivo para agregar la ruta adicional (en mi caso, “experimento/”:

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL + 'experiment/',
  ...

Luego, las URL se resuelven bien, por ejemplo: http://localhost:8080/experiment/about

Comentarios y puntuaciones

Te invitamos a auxiliar nuestra tarea escribiendo un comentario o dejando una puntuación te damos la bienvenida.

---

---

Utiliza Nuestro Buscador