Du kannst nicht mehr als 25 Themen auswählen
Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
84 Zeilen
2.5 KiB
84 Zeilen
2.5 KiB
vor 4 Jahren
|
# 基于 vue-cli 3.0.0 构建的多页面基础项目模板
|
||
|
|
|
||
|
|
前言
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
> 该项目跑了下 `vue-cli 3.0.0` 多页面项目创建的流程，就当个以后多页项目的雏形了，新版的 `vue-cli` 已经默认可以支持多页面构建了（不需要之前版本的那种修改 `webpcak` 配置文件了），可以共用放在 `src` 目录下的 `store.js` 里面的数据
|
||
|
|
|
||
|
|
效果 GIF 图
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
> 
|
||
|
|
|
||
|
|
参考资料
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
- [vue-cli 整体官方文档](https://cli.vuejs.org/guide/)
|
||
|
|
|
||
|
|
- [vue-cli 3.0.0 安装](https://cli.vuejs.org/guide/creating-a-project.html#installation)
|
||
|
|
|
||
|
|
- [vue-cli 多页面的配置方法](https://cli.vuejs.org/config/#pages)
|
||
|
|
注意：这里的 `vue.config.js` 配置文件是需要自行创建的，与 `package.json` 一样存在于项目根目录
|
||
|
|
|
||
|
|
- [vue.config.js 配置文件官方介绍](https://cli.vuejs.org/config/#vue-config-js)
|
||
|
|
|
||
|
|
运行方法（nodejs 版本建议 8.10.0 以上）
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
- 装包
|
||
|
|
|
||
|
|
```shell
|
||
|
|
# 先得全局安装 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` 配置文件里面的内容，源码和注释如下所示
|
||
|
|
|
||
|
|
```javascript
|
||
|
|
// 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'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|