vue單頁怎麼改成多頁面-前端問答-PHP中文網

vue單頁怎麼改成多頁面

WBOY

發布： 2023-05-24 10:54:07

原創

1311 人瀏覽過

在使用Vue進行開發時，往往採用單頁應用(SPA)的方式，這種方式只有一個HTML頁面，所有的重要元件都在該頁面中動態加載，並且使用Vue的路由器來呈現不同的視圖。然而，有些情況下需要將單頁應用程式轉換為多頁面(MPA)，也就是說需要為每個視圖建立一個不同的HTML檔案。在這篇文章中，我們將討論如何將Vue單頁應用程式轉換為多頁面應用程式。

設定webpack

首先我們需要在webpack中設定我們的MPA，以確保每個元件都可以產生自己的HTML檔案。

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

登入後複製

在上面的程式碼中，我們定義了三個入口點，並且分別為每個HTML檔案提供了一個模板，這裡我們使用HtmlWebpackPlugin將產生的JS檔案加入到每個HTML檔案中。

路由配置

接下來我們需要對路由進行一些修改，以確保它能夠適應多頁面應用程式。我們需要將Vue路由器切換到“history”模式，以使路由不會添加額外的“#”字符，同時需要修改路由配置以將其與新的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頁面中存取。

寫前端程式碼

在我們完成了上述步驟後，我們現在可以寫前端程式碼，並使用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建置為一組文件，並將它們部署到網站伺服器中。我們需要為每個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中文網其他相關文章！