Comment changer la vue d'une seule page en plusieurs pages

Lors du développement à l'aide de Vue, une application monopage (SPA) est souvent utilisée. Cette méthode n'a qu'une seule page HTML, tous les composants importants sont chargés dynamiquement dans la page et le routeur de Vue est utilisé pour présenter différentes vues. Cependant, il existe des situations où il est nécessaire de convertir une application monopage en application multipage (MPA), ce qui implique de créer un fichier HTML différent pour chaque vue. Dans cet article, nous verrons comment convertir une application Vue monopage en une application multipage.

1. Configuration du webpack

Nous devons d'abord configurer notre MPA dans le webpack pour nous assurer que chaque composant peut générer son propre fichier HTML.

Grâce au plug-in webpack, nous pouvons configurer un point d'entrée pour chaque vue, utiliser le plug-in HtmlWebpackPlugin pour générer un fichier d'entrée pour chaque fichier HTML et ajouter une balise Script au fichier JS généré. De cette façon, nous pouvons créer un fichier HTML pour chaque vue selon nos besoins.

Ce qui suit est un exemple simple de configuration de webpack :

module.exports = {
  entry: {
    home: './src/pages/home/main.js',
    about: './src/pages/about/main.js',
    contact: './src/pages/contact/main.js'
  },
  output: {
    path: './dist',
    filename: '[name].[hash].js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'home.html',
      template: './src/pages/home/index.html',
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',
      template: './src/pages/about/index.html',
      chunks: ['about']
    }),
    new HtmlWebpackPlugin({
      filename: 'contact.html',
      template: './src/pages/contact/index.html',
      chunks: ['contact']
    })
  ]
}

Dans le code ci-dessus, nous définissons trois points d'entrée et fournissons un modèle pour chaque fichier HTML. Ici, nous utilisons HtmlWebpackPlugin pour ajouter le fichier JS généré dans chaque fichier HTML.

2. Configuration du routage

Ensuite, nous devons apporter quelques modifications au routage pour nous assurer qu'il peut s'adapter aux applications multipages. Nous devons faire passer le routeur Vue en mode « historique » afin que les caractères « # » supplémentaires ne soient pas ajoutés à la route, et nous devons modifier la configuration de routage pour la faire correspondre au nouveau nom de fichier HTML. Nous pouvons effectuer les modifications requises en :

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import createRouter from '@/router'
import { sync } from 'vuex-router-sync'
import store from '@/store'

Vue.config.productionTip = false

const { app, router: createdRouter } = createRouter()

// sync the router with the vuex store
// this registers `store.state.route`
sync(store, createdRouter)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  created() {
    const linkTags = document.getElementsByTagName('link')
    const links = Array.prototype.slice.call(linkTags)
    links.forEach(link => {
      const href = link.getAttribute('href')
      if (href && href.indexOf('.') !== -1) {
        link.setAttribute('href', `/public/pages/${[this.$route.path.split('/')[1]]}/${href}`)
      }
    })
  },
  render: h => h(App)
})

Dans le code ci-dessus, nous importons d'abord la fonction createRouter() et l'utilisons pour créer l'application et les instances du routeur. Nous synchronisons ensuite le routeur Vuex avec l'application Vue et appelons la fonction create() pour modifier l'attribut href des balises a utilisées pour référencer les ressources statiques afin de garantir qu'elles font référence aux bons fichiers CSS et JS.

Nous devons également modifier la configuration du routeur pour nous assurer qu'il correspond au fichier HTML correct comme suit :

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home.vue'
import About from '@/pages/about/About.vue'
import Contact from '@/pages/contact/Contact.vue'

Vue.use(Router)

export default function createRouter() {
  const router = new Router({
    mode: 'history',
    base: '/',
    routes: [
      {
        path: '/',
        redirect: '/home'
      },
      {
        path: '/home',
        name: 'Home',
        component: Home,
        meta: {
          title: 'Home Page'
        }
      },
      {
        path: '/about',
        name: 'About',
        component: About,
        meta: {
          title: 'About Page'
        }
      },
      {
        path: '/contact',
        name: 'Contact',
        component: Contact,
        meta: {
          title: 'Contact Page'
        }
      }
    ]
  })
  return { router }
}

3. Déterminez le chemin de la ressource statique

Après avoir converti l'application monopage en application multipage, nous vous devez vous assurer que tous les actifs statiques se chargent correctement. Dans une application monopage, nous référençons généralement toutes les ressources statiques dans un fichier HTML. Nous pouvons donc définir la cible de sortie du webpack sur /dist dans le répertoire racine pour garantir que tous les fichiers peuvent être correctement localisés dans Access à partir de plusieurs pages HTML.

4. Écrire le code front-end

Après avoir terminé les étapes ci-dessus, nous pouvons maintenant écrire le code front-end et le développer à l'aide de Vue. Nous pouvons écrire des composants indépendants pour chaque page ou utiliser des modèles de composants Vue pour partager certains composants. Quelle que soit la méthode que nous utilisons, nous devons nous assurer que le nom de fichier de chaque composant et le nom de fichier du fichier HTML correspondent.

// Home.vue
<template>
  <div>
    <h1>Home page</h1>
    <p>Welcome to my home page!</p>
  </div>
</template>

<!-- home.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home Page</title>
  <link rel="stylesheet" href="/public/pages/home/app.12345.css">
</head>
<body>
  <div id="app"></div>
  <script src="/public/pages/home/app.12345.js"></script>
</body>
</html>

Enfin, assurez-vous que publicPath est configuré dans webpack pour gérer correctement les chemins de ressources statiques. publicPath doit pointer vers le chemin de base de chaque fichier HTML pour garantir que chaque fichier peut charger correctement toutes les ressources dont il a besoin.

// webpack.config.js
module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].[hash:8].js',
    publicPath: '/'
  },
  // ...
}

5. Emballage et déploiement

Nous pouvons maintenant utiliser webpack pour créer notre MPA sous la forme d'un ensemble de fichiers et les déployer sur le serveur du site Web. Nous devons générer un répertoire distinct pour chaque fichier HTML et créer un composant commun pour chaque répertoire. Si nous utilisons Vue-cli 3.0, nous pouvons définir la configuration de build pour une application multipage en modifiant le fichier vue.config.js comme indiqué ci-dessous :

// vue.config.js
module.exports = {
  pages: {
    home: {
      entry: 'src/pages/home/main.js',
      template: 'public/pages/home/app.html',
      filename: 'home.html',
      chunks: ['chunk-vendors', 'chunk-common', 'home']
    },
    about: {
      entry: 'src/pages/about/main.js',
      template: 'public/pages/about/app.html',
      filename: 'about.html',
      chunks: ['chunk-vendors', 'chunk-common', 'about']
    },
    contact: {
      entry: 'src/pages/contact/main.js',
      template: 'public/pages/contact/app.html',
      filename: 'contact.html',
      chunks: ['chunk-vendors', 'chunk-common', 'contact']
    }
  }
}

Dans le code ci-dessus, nous avons utilisé les "pages" fournies par Vue Attribut CLI », qui nous permet de configurer différentes pages pour chaque composant et de générer automatiquement les fichiers correspondants pour chaque page.

Nous avons maintenant terminé la création et le déploiement de l'application multipage. De cette façon, nous pouvons gérer une variété de pages de manière très flexible lors de la création d'applications avec Vue. Nous pouvons ajouter ou supprimer des pages selon les besoins et créer des composants indépendants pour chaque page. Dans l’ensemble, cela nous permet de créer des applications plus modulaires et maintenables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!