vue の単一ページを複数ページに変更する方法-フロントエンドQ&A-php.cn

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

WBOY

リリース： 2023-05-24 10:54:07

オリジナル

1338 人が閲覧しました

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

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 ファイルに変換します。

ルーティング構成

次に、複数ページのアプリケーションに適応できるように、ルーティングにいくつかの変更を加える必要があります。余分な「#」文字がルートに追加されないように、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 }
}

ログイン後にコピー

静的リソースパスを決定します

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

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

上記の手順を完了したら、フロントエンドコードを記述し、開発に 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: '/'
  },
  // ...
}

ログイン後にコピー

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

これで、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 サイトの他の関連記事を参照してください。