基于-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’ } }

``` Github 地址

https://github.com/sunxiaochuan/multipage