前言
该项目跑了下
vue-cli 3.0.0多页面项目创建的流程，就当个以后多页项目的雏形了，新版的vue-cli已经默认可以支持多页面构建了（不需要之前版本的那种修改webpcak配置文件了），可以共用放在src目录下的store.js里面的数据
效果 GIF 图
效果.gif
参考资料
vue-cli 多页面的配置方法
注意：这里的vue.config.js配置文件是需要自行创建的，与package.json一样存在于项目根目录
运行方法（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
主要修改的地方
- 将之前默认的路径改为以
@为地址的索引
image.png
image.png
- 新建
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 地址
