Adakah vue sesuai untuk aplikasi berbilang halaman?

vue sesuai untuk aplikasi berbilang halaman. Vue bergantung pada webpack semasa pembangunan kejuruteraan, dan webpack mengintegrasikan semua sumber untuk membentuk fail html dan sekumpulan fail js jika anda ingin menggunakan vue untuk melaksanakan aplikasi berbilang halaman, anda perlu mengkonfigurasi semula kebergantungannya; mengubah suai konfigurasi webpack, perancah mempunyai keupayaan untuk membina aplikasi berbilang halaman.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Kami tahu bahawa vue boleh membangunkan aplikasi satu halaman web dengan cepat, dan pegawai itu memberikan kami perancah aplikasinya sendiri vue-cli. Kami hanya perlu memuat turun perancah dan memasang kebergantungan untuk memulakan prototaip aplikasi vue.

Ini mendapat manfaat daripada penjejakan kebergantungan pek web, pemuat pelbagai imbuhan sumber dan fungsi berkuasa pemalam pek web yang berkaitan.

Walau bagaimanapun, kadangkala, kami mempunyai keperluan pembangunan untuk berbilang halaman Dalam kes ini, kami boleh membina berbilang aplikasi untuk berbilang halaman, seperti menjana berbilang direktori aplikasi melalui vue-cli, tetapi dalam kes ini akan ada. banyak kod pembinaan pendua dan kod plat dandang, dan ia juga akan memusnahkan perpaduan aplikasi dan menjadikannya sukar untuk dikekalkan. Kami boleh mengubah suai konfigurasi webpack berdasarkan vue-cli untuk membolehkan perancah membina aplikasi berbilang halaman.

vue bergantung pada webpack semasa pembangunan kejuruteraan, dan webpack menyepadukan semua sumber untuk membentuk fail html dan sekumpulan fail js Jika vue dilaksanakan sebagai aplikasi berbilang halaman, ia perlu konfigurasi semula Ketergantungan. iaitu, mengubah suai fail konfigurasi webpack

Berikut terutamanya memperincikan langkah pelaksanaan khusus pembangunan aplikasi berbilang halaman (MPA) Vue

1.1. Fail konfigurasi yang perlu diubah suai

1 Dalam direktori, cari entri dalam domain module.exports, dan konfigurasikan serta tambahkan berbilang entri di sana:

Beri perhatian kepada pengubahsuaian dan surat-menyurat kotak hijau.

  entry: {
    app: './src/main.js',
    one: './src/pages/one.js',
    two: './src/pages/two.js'
  }

2. Buat pengubahsuaian pada persekitaran pembangunan jalankan dev, buka fail buildwebpack.dev.conf.js dan cari pemalam dalam module.exports Perkara berikut ditulis seperti berikut:

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      chunks: ['app']
    }),
    new HtmlWebpackPlugin({
      filename: 'one.html',
      template: 'one.html',
      inject: true,
      chunks: ['one']
    }),
    new HtmlWebpackPlugin({
      filename: 'two.html',
      template: 'two.html',
      inject: true,
      chunks: ['two']
    }),

Nota: Konfigurasi di sini lebih penting Jika ia tidak ditulis dengan baik, ralat akan dilaporkan semasa pembungkusan. base.conf.js. Nama pembolehubah yang sepadan. Fungsi ketulan ialah setiap entri akan sepadan dengan entri setiap kali ia disusun dan dijalankan Jika tidak ditulis, sumber semua halaman akan diperkenalkan. Iaitu, aplikasi satu halaman telah dibentuk sebelum konfigurasi projek diubah.

3. Kemudian konfigurasikan binaan run, iaitu persekitaran kompilasi. Mula-mula buka fail configindex.js dan tambahkan

    index: path.resolve(__dirname, '../dist/index.html'),
    one: path.resolve(__dirname, '../dist/one.html'),
    two: path.resolve(__dirname, '../dist/two.html'),

ini pada binaan Nota: Ini ialah html yang terbentuk dalam folder dist selepas pembungkusan.

4. Kemudian buka fail /build/webpack.prod.conf.js, cari HTMLWebpackPlugin dalam pemalam dan tambah

 new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'app']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.one,
      template: 'one.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'one']
    }),
    new HtmlWebpackPlugin({
      filename: config.build.two,
      template: 'two.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency',
      chunks: ['manifest', 'vendor', 'two']
    }),

Nota: nama fail merujuk kepada binaan dalam configindex.js Setiap halaman mesti dikonfigurasikan dengan satu ketulan, jika tidak, sumber semua halaman akan dimuatkan.

1.2 Direktori Saya

<.>2.3. Kod untuk beberapa fail yang perlu dibuat

1. Kod fail One.js: (Saya memberikan contoh di sini), two.js adalah serupa kepada kod ini , sila gantikan "satu" dengan "dua".

import Vue from 'vue'
import one from './one.vue'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
    el: '#one',
    render: h => h(one)
})

2. Kod fail One.vue: (Saya memberi contoh di sini Two.vue adalah serupa dengan kod ini.

<template>
    <div>
        <p>{{msg}}</p>
    </div>
</template>

<script>
    export default {
        name: &#39;one&#39;,
        data() {
            return {
                msg: &#39;I am one&#39;
            }
        }
    }
</script>

3. kod fail one.html: (Saya memberikan contoh di sini), two.vue adalah serupa dengan kod ini, cuma gantikan "satu" dengan "dua".

nbsp;html>


    <meta>
    <meta>
    <title>one-page</title>


    <div></div>

Perhatian! Saya terlupa untuk mengubah suai id dalam

sebelum ini, dan halaman itu kosong tanpa kandungan Apabila saya membuka konsol, saya melihat bahawa tiada kandungan dalam teg div, dan id itu adalah apl baik selepas pengubahsuaian. <div id="one"></div>

[Cadangan berkaitan:

tutorial video vuejs, pembangunan bahagian hadapan web]

Atas ialah kandungan terperinci Adakah vue sesuai untuk aplikasi berbilang halaman?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!