前言
作为一个专业踩坑各种小程序框架 (原生, wepy,web-view) 的前端小白鼠来说, 第一次见到 mpvue 还是蛮兴奋的, 毕竟可以无缝对接 Vue, 大大降低了小程序的学习成本. 综合对比一下几个框架的优劣, 毫不犹豫的选择了 mpvue 来开发小程序, 下面是我的踩坑指南, 不正确的地方, 希望大家斧正.
踩坑指南
- 1.
- Cannot assign to read only property 'exports' of object '#<Object>'
编译报错
这是因为引用第三方插件的时候, 带入了 module.exports 的写法,
webpack 可以使用 require 和 export , 但是不能混合使用 import 和 module.exports
, 你需要做的是更新根目录下的. babelrc 文件配置
vue 引入插件 Cannot assign to read only property 'exports' of object https://blog.csdn.net/u013034736/article/details/70174425
- {
- "presets": [
- ["env", {
- "modules": false,
- "targets": {
- "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
- }
- }],
- "stage-2"
- ],
- "plugins": [
- ["transform-runtime", {
- "polyfill": false,
- "regenerator": true
- }]
- ],
- "env": {
- "test": {
- "presets": ["env", "stage-2"],
- "plugins": ["istanbul"]
- }
- }
- }
2. 挂载在 Vue.prototype 上的属性, 在模板语法里面是 undefined, 必须经过 computed 计算过一下才能用. via@noahlam
- import config from './config'
- Vue.prototype.$serverPath = config.serverPath
在页面中这样使用
<img :src="$serverPath +'logo.png'" />
编译之后会变成这样的情况
<image src="undefinedlogo.png"></image>
你需要做的是, 在每个使用的页面 computed 里面返回 this.$serverPath
3. 相对路径的图片不显示, 比如
<img src="../../images/LOGO.png">
解决是: 把路径 import 进来, 或者是把图片放在 static 目录下引用, 然而作为 CSS background-image 引用时, 只能选择引用远程图片, 或者相对目录小于 8k(webpck 配置有关)的图片, 不然编译器会报错
- <template>
- <div>
- <div class="test"></div>
- <img :src="imgUrl">
- </div>
- </template>
- <style>
- .test{
- width: 48rpx;
- height: 48rpx;
- background-image: url("../../img/a.png");
- }
- </style>
- <script>
- import imgUrl from '@/img/a.png'
- export default {
- data() {
- return {
- imgUrl
- }
- }
- </script>
4. 子组件数据检测的问题
比如我在某个页面引用了这样的一个组件, 绑定数据 myOrderList, 同时我引入了 vuex 来做状态管理, 管理 myOrderList 对象
- ### A 页面中
- <order :isEnd="isEnd" :orderList="myOrderList"></order>
- ### B 页面中更新 "myOrderList" 对象
- this.$store.commit('updateList', {data: this.orderList});
当 A 页面再次显示的时候, 子组件的数据流没有更新, 打印 myOrderList 对象都有更新. 我的解决办法是, 先把 myOrderList 赋值为空, 然后再次赋值 store.state 中的对象, 问题就解决了. 估计是 mpvue 的数据检测机制有问题, 说得不对的地方希望大佬们斧正.
5. 原生组件引入的问题, 参考在 mpvue 使用 echarts 小程序组件 https://github.com/mpvue/examples/tree/master/echarts , 官方的文档已经很详细了, 我这边说几个要点:
ready 为异步获取数据.
为 init 添加接收 options 传参
page 目录下 main.js 需要添加
usingComponents: {'ec-canvas': '../../../static/ec-canvas/ec-canvas'}
需要放在 static 目录下
第一条和第二条尤为重要, 大家切记
总结
毕竟一个框架刚刚出来, 有各种各样的坑, 希望大家多多给官方提 PR 和 Issues.
来源: https://juejin.im/post/5adf05616fb9a07ac1621125