mpvue 单文件页面配置详解

index.vue // 页面文件
main.js // 打包入口，完成 vue 的实例化
main.json // 小程序特有的页面配置，早期写在 main.js 文件中

vue init mpvue/mpvue-quickstart my-project

npm i mpvue-config-loader -D

yarn add mpvue-config-loader -D

module.exports = {
 module: {
 rules: [
  {
  test: /\\.vue$/,
  loader: \'mpvue-loader\',
  options: vueLoaderConfig
  },
+  {
+  test: /\\.vue$/,
+  loader: \'mpvue-config-loader\',
+  exclude: [resolve(\'src/components\')],
+  options: {
+   entry: \'./main.js\'
+  }
+  }
 ...
 ]
 }
 ...
 plugins: [
 new MpvuePlugin(),
- new CopyWebpackPlugin([{
-  from: \'**/*.json\',
-  to: \'\'
- }], {
-  context: \'src/\'
- }),
 ...
 ]
}

< >
export default {
+ config: {
+ pages: [
+  \'pages/index/main\',
+  \'pages/logs/main\',
+  \'pages/counter/main\'
+ ],
+ window: {
+  backgroundTextStyle: \'light\',
+  navigationBarBackgroundColor: \'#fff\',
+  navigationBar Text: \'WeChat\',
+  navigationBarTextStyle: \'black\'
+ }
+ },
 created () {
 ...
 }
}

import { formatTime } from \'@/utils/index\'
import card from \'@/components/card\'

export default {
+ config: {
+ navigationBar Text: \'查看启动日志\'
+ },
 ...
}

npm run dev

yarn dev