So ändern Sie eine einzelne Vue-Seite in mehrere Seiten

Bei der Entwicklung mit Vue wird häufig eine Single-Page-Anwendung (SPA) verwendet. Diese Methode hat nur eine HTML-Seite, alle wichtigen Komponenten werden dynamisch in die Seite geladen und der Router von Vue wird verwendet, um verschiedene Ansichten darzustellen. Es gibt jedoch Situationen, in denen es notwendig ist, eine Single-Page-Anwendung in eine Multi-Page-Anwendung (MPA) zu konvertieren, was bedeutet, dass für jede Ansicht eine andere HTML-Datei erstellt werden muss. In diesem Artikel besprechen wir, wie man eine einseitige Vue-Anwendung in eine mehrseitige Anwendung umwandelt.

1. Webpack konfigurieren

Zuerst müssen wir unseren MPA im Webpack konfigurieren, um sicherzustellen, dass jede Komponente ihre eigene HTML-Datei generieren kann.

Über das Webpack-Plugin können wir einen Einstiegspunkt für jede Ansicht konfigurieren und das HtmlWebpackPlugin-Plugin verwenden, um eine Eintragsdatei für jede HTML-Datei zu generieren und der generierten JS-Datei ein Skript-Tag hinzuzufügen. Auf diese Weise können wir bei Bedarf für jede Ansicht eine HTML-Datei erstellen.

Das Folgende ist ein einfaches Webpack-Konfigurationsbeispiel:

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

Im obigen Code definieren wir drei Einstiegspunkte und stellen eine Vorlage für jede HTML-Datei bereit. Hier verwenden wir HtmlWebpackPlugin, um die generierte JS-Datei in jede HTML-Datei einzufügen.

2. Routing-Konfiguration

Als nächstes müssen wir einige Änderungen am Routing vornehmen, um sicherzustellen, dass es sich an mehrseitige Anwendungen anpassen kann. Wir müssen den Vue-Router in den „History“-Modus schalten, damit der Route keine zusätzlichen „#“-Zeichen hinzugefügt werden, und wir müssen die Routing-Konfiguration ändern, um sie an den neuen HTML-Dateinamen anzupassen. Wir können die erforderlichen Änderungen wie folgt durchführen:

// 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)
})

Im obigen Code importieren wir zunächst die Funktion createRouter() und verwenden sie zum Erstellen der Anwendungs- und Router-Instanzen. Anschließend synchronisieren wir den Vuex-Router mit der Vue-Anwendung und rufen die Funktion create() auf, um das href-Attribut der a-Tags zu ändern, die zum Verweisen auf die statischen Ressourcen verwendet werden, um sicherzustellen, dass sie auf die richtigen CSS- und JS-Dateien verweisen.

Wir müssen auch die Router-Konfiguration ändern, um sicherzustellen, dass sie wie folgt der richtigen HTML-Datei zugeordnet wird:

// 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. Bestimmen Sie den statischen Ressourcenpfad

Nachdem wir die Single-Page-App in eine Multi-Page-App konvertiert haben, müssen wir Sie müssen sicherstellen, dass alle statischen Assets korrekt geladen werden. In einer Einzelseitenanwendung verweisen wir normalerweise auf alle statischen Ressourcen in einer HTML-Datei, sodass wir das Ausgabeziel von Webpack im Stammverzeichnis auf /dist festlegen können, um sicherzustellen, dass alle Dateien von mehreren HTML-Seiten aus korrekt in Access gefunden werden können.

4. Schreiben des Front-End-Codes

Nachdem wir die oben genannten Schritte abgeschlossen haben, können wir nun den Front-End-Code schreiben und ihn mit Vue entwickeln. Wir können für jede Seite unabhängige Komponenten schreiben oder Vue-Komponentenvorlagen verwenden, um bestimmte Komponenten gemeinsam zu nutzen. Unabhängig davon, welche Methode wir verwenden, müssen wir sicherstellen, dass der Dateiname jeder Komponente und der Dateiname der HTML-Datei übereinstimmen.

// 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>

Stellen Sie abschließend sicher, dass publicPath im Webpack so konfiguriert ist, dass statische Ressourcenpfade korrekt verarbeitet werden. publicPath sollte auf den Basispfad jeder HTML-Datei verweisen, um sicherzustellen, dass jede Datei alle benötigten Ressourcen korrekt laden kann.

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

5. Paketierung und Bereitstellung

Jetzt können wir Webpack verwenden, um unsere MPA als eine Reihe von Dateien zu erstellen und sie auf dem Website-Server bereitzustellen. Wir müssen für jede HTML-Datei ein separates Verzeichnis generieren und für jedes Verzeichnis eine gemeinsame Komponente erstellen. Wenn wir Vue-cli 3.0 verwenden, können wir die Build-Konfiguration für mehrseitige Anwendungen festlegen, indem wir die Datei vue.config.js wie unten gezeigt ändern:

// 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']
    }
  }
}

Im obigen Code haben wir die von Vue bereitgestellten „Seiten“ verwendet CLI“-Eigenschaft, die es uns ermöglicht, unterschiedliche Seiten für jede Komponente zu konfigurieren und automatisch die entsprechenden Dateien für jede Seite zu generieren.

Jetzt haben wir die Erstellung und Bereitstellung der mehrseitigen Anwendung abgeschlossen. Auf diese Weise können wir beim Erstellen von Anwendungen mit Vue sehr flexibel mit einer Vielzahl von Seiten umgehen. Wir können nach Bedarf Seiten hinzufügen oder entfernen und für jede Seite unabhängige Komponenten erstellen. Insgesamt können wir dadurch modularere und wartbarere Anwendungen erstellen.

Das obige ist der detaillierte Inhalt vonSo ändern Sie eine einzelne Vue-Seite in mehrere Seiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!