Bagaimana untuk menukar halaman tunggal vue kepada berbilang halaman

Apabila menggunakan Vue untuk pembangunan, aplikasi halaman tunggal (SPA) sering digunakan Kaedah ini hanya mempunyai satu halaman HTML, semua komponen penting dimuatkan secara dinamik dalam halaman ini, dan penghala Vue digunakan untuk memaparkan paparan yang berbeza. Walau bagaimanapun, terdapat situasi di mana perlu untuk menukar aplikasi satu halaman kepada aplikasi berbilang halaman (MPA), yang bermaksud mencipta fail HTML yang berbeza untuk setiap paparan. Dalam artikel ini, kami akan membincangkan cara menukar aplikasi satu halaman Vue kepada aplikasi berbilang halaman.

1. Mengkonfigurasi pek web

Mula-mula kita perlu mengkonfigurasi MPA kita dalam pek web untuk memastikan setiap komponen boleh menjana fail HTMLnya sendiri.

Melalui pemalam webpack, kami boleh mengkonfigurasi titik masuk untuk setiap paparan dan menggunakan pemalam HtmlWebpackPlugin untuk menjana fail masukan bagi setiap fail HTML dan menambah teg Skrip pada fail JS yang dijana. Dengan cara ini, kita boleh mencipta fail HTML untuk setiap paparan mengikut keperluan.

Berikut ialah contoh konfigurasi webpack yang mudah:

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

Dalam kod di atas, kami mentakrifkan tiga titik masuk dan menyediakan templat untuk setiap fail HTML Di sini kami Gunakan HtmlWebpackPlugin untuk menambah yang dijana JS fail ke setiap fail HTML.

2. Konfigurasi penghalaan

Seterusnya kita perlu membuat beberapa pengubahsuaian pada penghalaan untuk memastikan ia boleh menyesuaikan diri dengan aplikasi berbilang halaman. Kami perlu menukar penghala Vue kepada mod "sejarah" supaya aksara "#" tambahan tidak ditambahkan pada laluan dan kami perlu mengubah suai konfigurasi penghalaan untuk memadankannya dengan nama fail HTML baharu. Kita boleh mencapai perubahan yang diperlukan dengan:

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

Dalam kod di atas, kita mula-mula mengimport fungsi createRouter() dan menggunakannya untuk mencipta contoh aplikasi dan penghala. Kami kemudiannya menyegerakkan penghala Vuex dengan aplikasi Vue dan memanggil fungsi create() untuk mengubah suai atribut href bagi teg a yang digunakan untuk merujuk sumber statik untuk memastikan ia merujuk fail CSS dan JS yang betul.

Kami juga perlu mengubah suai konfigurasi penghala untuk memastikan ia dipetakan ke fail HTML yang betul, seperti yang ditunjukkan di bawah:

// 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. Tentukan laluan sumber statik

Selepas kami menukar apl satu halaman kami kepada apl berbilang halaman, kami perlu memastikan semua aset statik dimuatkan dengan betul. Dalam aplikasi satu halaman, kami biasanya merujuk semua sumber statik ke dalam fail HTML, jadi kami boleh menetapkan sasaran output pek web ke /dist dalam direktori akar untuk memastikan bahawa semua fail boleh ditempatkan dengan betul dalam Akses daripada berbilang halaman HTML.

4. Menulis kod bahagian hadapan

Selepas kami menyelesaikan langkah di atas, kami kini boleh menulis kod bahagian hadapan dan membangunkannya menggunakan Vue. Kami boleh menulis komponen bebas untuk setiap halaman, atau menggunakan templat komponen Vue untuk berkongsi komponen tertentu. Tidak kira kaedah yang kami gunakan, kami perlu memastikan bahawa nama fail setiap komponen dan nama fail fail HTML sepadan.

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

Akhir sekali, pastikan publicPath dikonfigurasikan dalam pek web untuk mengendalikan laluan sumber statik dengan betul. publicPath harus menunjuk ke laluan asas setiap fail HTML untuk memastikan setiap fail boleh memuatkan semua sumber yang mereka perlukan dengan betul.

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

5. Pembungkusan dan Penerapan

Kini kami boleh menggunakan webpack untuk membina MPA kami sebagai satu set fail dan mengaturnya ke pelayan tapak web. Kita perlu menjana direktori berasingan untuk setiap fail HTML dan mencipta komponen biasa untuk setiap direktori. Jika kami menggunakan Vue-cli 3.0, kami boleh menetapkan konfigurasi binaan untuk aplikasi berbilang halaman dengan mengubah suai fail vue.config.js seperti berikut:

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

Dalam kod di atas, kami telah menggunakan Vue CLI Atribut "halaman" disediakan, yang membolehkan kami mengkonfigurasi halaman yang berbeza untuk setiap komponen dan menjana fail yang sepadan secara automatik untuk setiap halaman.

Kini kami telah menyelesaikan penciptaan dan penggunaan aplikasi berbilang halaman. Dengan cara ini, kami boleh mengendalikan pelbagai halaman dengan sangat fleksibel apabila membina aplikasi dengan Vue. Kami boleh menambah atau mengalih keluar halaman mengikut keperluan dan membuat komponen bebas untuk setiap halaman. Secara keseluruhannya, ini membolehkan kami membina lebih banyak aplikasi modular dan boleh diselenggara.

Atas ialah kandungan terperinci Bagaimana untuk menukar halaman tunggal vue kepada berbilang halaman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!