初识MpVUE开发微信小程序踩坑记录

安装预览的时候，不是用浏览器打开输入：localhost:8080。

而是打开微信开发者工具，把项目根目录导入进去。

找到build目录的webpack.base.conf.js把器rule注释掉。

// {

//   test: /\.(js|vue)$/,

//   loader: ‘eslint-loader‘,

//   enforce: ‘pre‘,

//   include: [resolve(‘src‘), resolve(‘test‘)],

//   options: {

//     formatter: require(‘eslint-friendly-formatter‘)

//   }

// },

坑三.相对路径的图片不显示,比如

<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>

坑四.原生组件引入的问题:

• ready 为异步获取数据。
• 为 init 添加接收 options 传参
• page目录下main.js需要添加 usingComponents: {‘ec-canvas‘: ‘../../../static/ec-canvas/ec-canvas‘}
• 需要放在static目录下

原文地址：https://www.cnblogs.com/hehf/p/10321297.html