显示目录

Vue-Cli 3 创建多页项目

Vue-Cli 3 创建单页项目 一文中介绍了创建单页项目, 现实中复杂一点的项目使用多页项目更合适一些, Vue-Cli 3 创建多页项目很容易, 创建的项目结构如下:

下面就简要的介绍下使用 Vue-Cli 3 创建多页项目的步骤:

  1. Vue-Cli 3 创建单页项目

  2. 在 src 目录下创建目录 pages/page1, pages/page2 (每个目录表示一个单页)

  3. 把 views 目录, App.vue, main.js, router.js, store.js 等都分别复制一份到 page1 和 page2 目录 (参考上面的项目结构图)

  4. 修改 vue.config.js 中的 pages, 配置每个单页的入口 (page1, page2 就是单页访问地址):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    module.exports = {
    devServer: {
    port: 8888,
    },
    pages: {
    page1: 'src/pages/page1/main.js',
    page2: 'src/pages/page2/main.js',
    },
    };
  5. 启动项目: yarn serve

  6. 访问页面:

  7. 打包项目: yarn build

  8. 自定义单页的入口模板

    有眼神好的同学可能看到了 public/index.htmlpublic/page2.html, 但是发现没有 public/page1.html, 这是因为 Vue-Cli 在 public 目录下发现页面对应的 ${subpage}.html 文件 (pages 下配置的 page1, page2), 就使用它生成这个页面的入口 html 文件, 如果没有则会使用 public/index.html 作为模板生成这个页面的入口 html 文件.

    由于不同页面引入的 js, css 或者第三方库等都可能不一样, 所以为页面定制自己的入口模板文件也是有必要的.