安装预览的时候,不是用浏览器打开输入: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目录下