vue の単一ページを複数ページに変更する方法

Vue を開発に使用する場合、シングル ページ アプリケーション (SPA) がよく使用されます。この方法には HTML ページが 1 つだけあり、すべての重要なコンポーネントがこのページに動的にロードされ、別のビューを表示するために Vue のルーターが使用されます。ただし、シングルページ アプリケーションをマルチページ アプリケーション (MPA) に変換する必要がある場合があります。これは、ビューごとに異なる HTML ファイルを作成することを意味します。この記事では、Vue の単一ページ アプリケーションをマルチページ アプリケーションに変換する方法について説明します。

1. webpack の構成

まず、各コンポーネントが独自の HTML ファイルを生成できるように、webpack で MPA を構成する必要があります。

webpack プラグインを介して、各ビューのエントリ ポイントを構成し、HtmlWebpackPlugin プラグインを使用して各 HTML ファイルのエントリ ファイルを生成し、生成された JS ファイルに Script タグを追加できます。このようにして、必要に応じてビューごとに HTML ファイルを作成できます。

次は、単純な 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']
    })
  ]
}

上記のコードでは、3 つのエントリ ポイントを定義し、各 HTML ファイルにテンプレートを提供します。ここでは、HtmlWebpackPlugin を使用して、生成されたJS ファイルを各 HTML ファイルに変換します。

2. ルーティング構成

次に、複数ページのアプリケーションに適応できるように、ルーティングにいくつかの変更を加える必要があります。余分な「#」文字がルートに追加されないように、Vue ルーターを「履歴」モードに切り替える必要があります。また、新しい HTML ファイル名と一致するようにルーティング設定を変更する必要があります。必要な変更は次の手順で実行できます。

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

上記のコードでは、最初に createRouter() 関数をインポートし、それを使用してアプリケーションとルーターのインスタンスを作成します。次に、Vuex ルーターを Vue アプリケーションと同期し、create() 関数を呼び出して、静的リソースの参照に使用される a タグの href 属性を変更して、静的リソースが正しい CSS ファイルと JS ファイルを参照するようにします。

また、次に示すように、正しい HTML ファイルにマッピングされるようにルーター構成を変更する必要があります。

// 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. 静的リソース パスを決定します

単一ページ アプリケーションを複数ページ アプリケーションに変換した後、すべての静的アセットが正しくロードされていることを確認する必要があります。シングルページ アプリケーションでは、通常、すべての静的リソースを HTML ファイルで参照するため、webpack の出力ターゲットをルート ディレクトリの /dist に設定して、複数の HTML ページからすべてのファイルを Access に正しく配置できるようにすることができます。

4. フロントエンド コードの記述

上記の手順を完了したら、フロントエンド コードを記述し、開発に Vue を使用できるようになります。ページごとに独立したコンポーネントを作成したり、Vue コンポーネント テンプレートを使用して特定のコンポーネントを共有したりできます。どの方法を使用する場合でも、各コンポーネントのファイル名と HTML ファイルのファイル名が一致していることを確認する必要があります。

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

最後に、静的リソース パスを正しく処理できるように webpack で publicPath が設定されていることを確認します。 publicPath は、各ファイルが必要なすべてのリソースを正しくロードできるように、各 HTML ファイルのベース パスを指す必要があります。

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

5. パッケージ化とデプロイメント

これで、webpack を使用して MPA をファイルのセットとして構築し、Web サイト サーバーにデプロイできるようになります。 HTML ファイルごとに個別のディレクトリを生成し、各ディレクトリに共通のコンポーネントを作成する必要があります。 Vue-cli 3.0 を使用する場合、vue.config.js ファイルを次のように変更することで、マルチページ アプリケーションのビルド構成を設定できます。

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

上記のコードでは、Vue CLI を使用しました。 「pages」属性が提供されているため、コンポーネントごとに異なるページを設定し、各ページに対応するファイルを自動的に生成できます。

これで、マルチページ アプリケーションの作成と展開が完了しました。このように、Vue でアプリケーションを構築する際に、さまざまなページを非常に柔軟に扱うことができます。必要に応じてページを追加または削除し、ページごとに独立したコンポーネントを作成できます。全体として、これにより、よりモジュール式で保守しやすいアプリケーションを構築できるようになります。

以上がvue の単一ページを複数ページに変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。