当前位置：首页 > VUE

vue cli 实现多页面

2026-02-20 16:47:32VUE

配置多页面入口

在 vue.config.js 中配置 pages 对象，每个键值对代表一个页面入口。键为页面名称，值为包含 entry（入口文件）、template（HTML模板）、filename（输出文件名）等配置的对象。

module.exports = {
  pages: {
    index: {
      entry: 'src/pages/index/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    about: {
      entry: 'src/pages/about/main.js',
      template: 'public/about.html',
      filename: 'about.html'
    }
  }
}

目录结构建议

多页面项目通常按功能模块划分目录，每个页面拥有独立的入口文件、组件和路由。推荐结构如下：

src/
  pages/
    index/
      main.js      # 入口文件
      App.vue      # 根组件
      components/  # 私有组件
      router/      # 路由配置
    about/
      main.js
      App.vue

公共依赖处理

通过 configureWebpack 或 chainWebpack 配置公共代码拆分，避免重复打包：

module.exports = {
  configureWebpack: {
    optimization: {
      splitChunks: {
        chunks: 'all',
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            priority: -10
          },
          common: {
            minChunks: 2,
            priority: -20,
            reuseExistingChunk: true
          }
        }
      }
    }
  }
}

环境变量配置

为不同页面设置特定环境变量，在项目根目录创建 .env.[mode] 文件：

vue cli 实现多页面

VUE_APP_PAGE_NAME=about

通过 process.env.VUE_APP_PAGE_NAME 在代码中访问。

开发模式调试

运行 vue-cli-service serve 时默认只打开第一个页面。可通过指定页面名称调试特定页面：

vue cli 实现多页面

vue-cli-service serve --page about

或修改 package.json 的 scripts 部分：

"scripts": {
  "serve:about": "vue-cli-service serve --page about"
}

生产构建优化

添加 preload 和 prefetch 配置提升性能：

module.exports = {
  chainWebpack: config => {
    Object.keys(pages).forEach(page => {
      config.plugins.delete(`prefetch-${page}`)
      config.plugin(`preload-${page}`).tap(() => [{
        rel: 'preload',
        as: 'script'
      }])
    })
  }
}

路由配置示例

每个页面的路由应独立配置。以 Vue Router 为例：

// src/pages/about/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import About from '../views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'about',
      component: About
    }
  ]
})