当前位置：首页 > VUE

vue cli 实现多页面

2026-01-20 00:46:03VUE

配置多页面入口

在 Vue CLI 项目中，多页面配置通过修改 vue.config.js 文件实现。需要为每个页面指定入口文件、模板和输出路径。以下是一个基本的多页面配置示例：

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
    about/
      main.js
      App.vue
public/
  index.html
  about.html

每个页面的入口文件（如 main.js）应独立存在，并导入各自的根组件（如 App.vue）。

共享公共代码

在多页面应用中，可以通过以下方式共享公共代码：

将公共组件放在 src/components 目录
公共工具函数放在 src/utils 目录
公共样式放在 src/assets/styles 目录

每个页面的入口文件可以按需导入这些共享资源。

开发环境运行

配置完成后，运行开发服务器会自动支持多页面：

npm run serve

访问不同页面时，需要在 URL 后添加页面文件名，例如 http://localhost:8080/about.html。

生产环境构建

构建生产版本时，会为每个页面生成独立的 HTML 文件和对应的静态资源：

npm run build

输出目录结构将包含所有配置的页面文件及其依赖资源。

动态页面配置

对于大量页面或需要动态生成的场景，可以通过编程方式生成 pages 配置：

vue cli 实现多页面

const glob = require('glob')

const pages = {}
glob.sync('./src/pages//main.js').forEach(path => {
  const name = path.match(/\/pages\/(.+)\/main.js/)[1]
  pages[name] = {
    entry: path,
    template: `public/${name}.html`,
    filename: `${name}.html`
  }
})

module.exports = { pages }

这种方法可以自动扫描 pages 目录下的所有入口文件并生成对应配置。