基于 vue-cli 3.0.0 构建的多页面基础项目模板

前言

---

该项目跑了下 vue-cli 3.0.0 多页面项目创建的流程，就当个以后多页项目的雏形了，新版的 vue-cli 已经默认可以支持多页面构建了（不需要之前版本的那种修改 webpcak 配置文件了），可以共用放在 src 目录下的 store.js 里面的数据

效果 GIF 图

---

参考资料

---

• vue-cli 整体官方文档

• vue-cli 3.0.0 安装

• vue-cli 多页面的配置方法 注意：这里的 vue.config.js 配置文件是需要自行创建的，与 package.json 一样存在于项目根目录

• vue.config.js 配置文件官方介绍

运行方法（nodejs 版本建议 8.10.0 以上）

---

• 装包

  # 先得全局安装 vue-cli 3.0.0 已安装的请忽略此步骤
  npm install -g @vue/cli
  # OR
  yarn global add @vue/cli
  
  # 本项目安装依赖
  yarn
  # OR
  npm install
  

• 运行

  # 开发
  npm run serve
  
  # 生产
  npm run build
  

主要修改的地方

---

• 将之前默认的路径改为以 @ 为地址的索引

  

• 新建 index 和 subpage 文件夹，内部的文件结构与之前 SPA 基本一致，只是将 store.js 文件单独提了重来以便数据公用

• 重点就是新建的 vue.config.js 配置文件里面的内容，源码和注释如下所示

  // vue.config.js
  module.exports = {
    pages: {
      index: {
        // 页面的入口文件
        entry: 'src/index/main.js',
        // 页面的模板文件
        template: 'public/index.html',
        // build 生成的文件名称  例： dist/index.html
        filename: 'index.html'
      },
      // template 默认会去找 public/subpage.html 页面，如果找不到会使用 public/index.html 文件
      // 输出文件会默认的推断为 subpage.html
      subpage: 'src/subpage/main.js'
    }
  }