通过配置文件自动生成各页面对应的 main.js 文件, 并返回 entry, 已支持新增页面热更新
目录结构
- build
- config
- src
- components
- pages
- news
- list.vue
- detail.vue
- App.vue
- main.js
- pages.js
- package.json
原理
以 src/main.js 为模板, 使用配置文件中的 path 及 config 属性分别替换
vue 文件导入路径
及 导出信息
安装
npm i mpvue-entry -D
使用
- // webpack.base.conf.js
- const getEntry = require('mpvue-entry') // getEntry(pages.js, main.js?, app.json?)
- module.exports = {
- entry: getEntry('./src/pages.js'),
- ...
- module: {
- rules: [
- {
- test: /\.js$/,
- include: [resolve('src'), resolve('node_modules/mpvue-entry')],
- use: [
- 'babel-loader',
- {
- loader: 'mpvue-loader',
- options: {
- checkMPEntry: true
- }
- }
- ]
- }
- ]
- }
- }
- // pages.js
- module.exports = [
- {
- path: '/pages/news/list', // 页面路径, 同时是 vue 文件相对于 src 的路径
- config: { // 页面配置, 即 page.json 的内容
- navigationBarTitleText: '文章列表',
- enablePullDownRefresh: true
- }
- }
- ]
- Tips
- // pages.js
- module.exports = [
- {
- path: '/pages/news/list', // 首页
- path: '/pages/news/detail'
- }
- ]
在 src/main.js 中引用文件时需通过 @ 标识引用
- // 正确
- import App from '@/App'
- // 错误
- import App from './App'
需在 src/App.vue 或 src/main.js 中指定 mpType 为 app
- // App.vue
- export default {
- mpType: 'app'
- }
- // 或 main.js
- App.mpType = 'app'
示例
基础用法
配置文件复用
附
GitHub https://github.com/F-loat/mpvue-entry
来源: https://juejin.im/post/5ae4069951882567382f57eb