集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面热更新
├─build
├─config
├─src
│ ├─components
│ ├─pages
│ │ └─news
│ │ │─list.vue
│ │ └─detail.vue
│ ├─App.vue
│ ├─main.js
│ └─pages.js
└─package.json
以 src/main.js
为模板,使用配置文件中的 path
及 config
属性分别替换 vue 文件导入路径
及 导出信息
vue init F-loat/mpvue-quickstart my-project
npm i mpvue-entry -D
// webpack.base.conf.js
const MpvueEntry = require('mpvue-entry')
module.exports = {
entry: MpvueEntry.getEntry('src/pages.js'),
...
plugins: [
new MpvueEntry(),
...
]
}
// pages.js
module.exports = [
{
path: 'pages/news/list', // 页面路径,同时是 vue 文件相对于 src 的路径,必填
config: { // 页面配置,即 page.json 的内容,可选
navigationBarTitleText: '文章列表',
enablePullDownRefresh: true
}
}
]
MpvueEntry.getEntry(paths)
- paths
String/Object
paths 为 String 类型时作为 pages 的值,自定义值为绝对路径或相对于项目根目录的相对路径(这里的相对路径实际上是相对于被执行文件的上级目录的)
// 默认值
{
// 页面配置文件
pages: 'src/pages.js',
// 主入口文件,作为模板
main: 'src/main.js',
// 入口模板文件,优先级较高
template: undefined,
// 项目配置文件
app: 'dist/app.json',
// 各页面入口文件目录
entry: 'mpvue-entry/dist/'
}
// 示例
MpvueEntry.getEntry({
pages: 'src/router/index.js',
app: 'wxapp/app.json',
})
-
首页默认为
pages.js
中的第一项,但会被main.js
中的配置覆盖 -
path
属性兼容绝对路径,且仅指定path
属性时可简写为字符串形式
// pages.js
module.exports = [
'/pages/news/list',
'/pages/news/detail'
]
- 可通过以下形式的注释指定
main.js
特有代码
console.log('hello world') // app-only
/* app-only-begin */
console.log('happy')
console.log('coding')
/* app-only-end */
- 可通过
native
属性指定页面为原生开发,不做编译处理
// pages.js
module.exports = [
{
path: 'pages/news/list',
native: true
}
]
- 可通过
subPackage
属性指定页面需分包加载(配合 Quickstart 模板使用效果更佳)
// pages.js
module.exports = [
{
path: 'packageA/news/detail',
subPackage: true
}
]
- 可通过
root
属性指定分包根路径,指定后subPackage
属性会自动置为true
// pages.js
module.exports = [
{
path: 'pages/news/detail',
root: 'pages/news'
}
]
以 mpvue-loader@1.1.0 为界(其实用法是一样的)