VueCli3 MPA 多页面配置从入门到精通

前端

2024-02-15 20:14:19

Vue CLI 3 中的 MPA 多页面配置：构建动态且高效的 Vue.js 应用程序

什么是 Vue CLI 3？

Vue CLI 3 是 Vue.js 的官方命令行工具，旨在简化 Vue.js 项目的创建和开发过程。它提供了广泛的功能，包括脚手架、热重载和代码分割。

什么是 MPA（多页面应用程序）？

MPA 是一种应用程序，其内容分布在多个页面上，每个页面都有自己的 HTML 文档。与单页面应用程序 (SPA) 不同，MPA 中的页面之间没有无缝转换。

在 Vue CLI 3 中配置 MPA

使用 Vue CLI 3 创建 MPA 项目非常简单，只需一个命令：

vue create --preset cli-plugin-multi-page my-mpa-project

这将创建一个具有以下结构的新项目：

my-mpa-project/
    ├── node_modules/
    ├── package.json
    ├── package-lock.json
    ├── public/
    ├── src/
    |   ├── main.js
    |   ├── App.vue
    |   ├── views/
    |       ├── Home.vue
    |       ├── About.vue
    |       ├── Contact.vue

配置 package.json

在 package.json 文件中，你需要添加一些配置选项以启用 MPA 支持：

"vue": {
    "configureWebpack": {
        "plugins": [
            [
                "html-webpack-plugin",
                {
                    "template": "./public/index.html"
                }
            ]
        ]
    }
}

创建页面组件

MPA 项目中的每个页面都有自己的组件，这些组件位于 src/views 目录中。例如，Home 页面的组件将位于 src/views/Home.vue。

注册页面组件

在 src/main.js 文件中，你需要注册页面组件以便路由器可以找到它们：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Contact from './views/Contact.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

new Vue({
  router
}).$mount('#app')