安裝預覽的時候，不是用瀏覽器打開輸入：localhost:8080。

而是打開微信開發者工具，把項目根目錄導入進去。

坑一：不支持Vue-router

之前vue項目直接移入，同步生成小程序不能使用vue-router

坑二：eslint連vue和js後綴文件都有嚴格校驗

找到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目錄下

初識MpVUE開發微信小程序踩坑記錄