记：使用vue全家桶 + vux组件库 打包成 dcloud 5+ app 开发过程中遇到的问题
vue-cli 版本：2.9.6
webpack 版本：3.6.0
1. vue-cli 安装好之后，不是自动打开默认浏览器
在 config文件夹 ---> dev选项中，有个 autoOpenBrowser 。把它置为 true 即可。
2. 使用less（或者sass）全局变量
起因： 因为想定义一些常用的工具样式。类似：超过一行隐藏字体并用省略号显示，清除浮动，主题颜色等。就考虑不用每个页面都引入，能直接使用定义的工具样式。
第一步： 安装 npm install sass-resources-loader --save-dev 对的，你没有看错，要使用less全局变量，就要安装 sass-resources-loader 这个包
第二步： 配置：找到build文件夹下面的utils.js 找到 exports.cssLoaders 中的最下面的 return ｛｝，然后在less配置项中配置以下代码
配置前：
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less'), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus') }
配置后：
return { css: generateLoaders(), postcss: generateLoaders(), less: generateLoaders('less').concat({ loader: 'sass-resources-loader', options: { resources: path.resolve(__dirname, '../src/assets/css/public.less') } }), sass: generateLoaders('sass', { indentedSyntax: true }), scss: generateLoaders('sass'), stylus: generateLoaders('stylus'), styl: generateLoaders('stylus')
}
（1） 配置的 less文件路径就是你自己的 工具样式 less 文件路径。用相对路径
（2） 如果是 想要使用 sass的 工具样式。只需要在 同样配置 sass 的地方，后面添加 concat 即可。内容也是一样，除了工具样式 sass文件路径名。
3. vux组件库安装后报错：you may need an appropriate loader to handle this file type
即 三点 ... 这种没有用 适当的 loader 来处理。这样的错误，是因为使用了vux 2x版本，所以先要安装 vux-loader
第一步：安装： npm install vux-loader --save-dev
第二步：配置：在 build ---> webpack.base.conf.js 里修改。原来的 module.exports 使用 let originalConfig = xxx 来替换 。配置好后重启项目就能使用了
修改前：
... module.exports = { ... }
修改后：
... let originalConfig = { ... }
//下面的代码放到最底部 const vuxLoader = require('vux-loader') module.exports = vuxLoader.merge(originalConfig , { plugins: ['vux-ui'] })
4. import vux 组件，导致 栈溢出： Maximum call stack size exceeded
产生这个的原因是： 引入的组件名 和当前 .vue文件中 export default 的name 值 相同，而且是 不区分大小写的相同。
修改方法： 把 name 值改成其它不相同的即可。
5. 修改vux 组件库某些组件的样式。
第一种方法： 如果是修改组件中，提供的 样式变量 这种官方提供的样式修改。那么，可以使用下面的这种办法：
第一步： 在上面第三个安装报错问题处，修改成以下代码：
... let originalConfig = { ... } //下面的代码放到最底部 const vuxLoader = require('vux-loader') module.exports = vuxLoader.merge(originalConfig , { plugins: ['vux-ui', 'progress-bar', 'duplicate-style', {name: 'less-theme', path: 'src/style/vux_theme.less'}] })
第二步： 在src下新建style文件夹，再新建vux_theme.less文件，然后里面加入需要修改的样式变量比如： @tabbar-text-active-color: #09BB07;
第三步：重启项目即可。如果把样式放到自己的 less 文件中，我发现还是没起作用。所以还是乖乖的按照上面的步骤来弄。
第二种方法： 也是个人推荐的一种方式
就是：在 style 中不使用 scoped 属性。那么这样当前页面的 样式就相当于全部公用了。为了防止样式污染，那么就需要在当前 .vue 组件中，最外层 div 加一个class 或者 id 值。这样利用优先级去修改样式即可。
第三种方式： 深度选择器 /deep/ <<<
大家都知道：如果使用了scoped属性，那么会在组件外层加上一个data-v的标识，导致修改不了组件内部的样式，除非使用 /deep/ 或者 <<< 深度选择器。但是深度选择器不支持less，但是可以转换一种方法来写就可以支持：
@deep: ~'>>>'; .parent-custom { @{deep} .child-title { font-size:20px; color: red; } }
（1） 注意 深度选择器 >>> 前面一定要加上 波浪符号 ~ 。这样表示不编译后面的内容，全部以字符串输出
（2） 这种深度选择器，也可以用于修改 v-html 的内容中的样式。
6. 使用 px2rem 之后，不编译第三方UI组件库的px单位的方法：
第一步： 不要安装 px2rem-loader 。需要安装 npm i postcss-px2rem-exclude –save
第二步： 在vue-cli搭建的环境中，有个.postcssrc.js文件，然后在这个文件修改成如下的代码：
module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, // to edit target browsers: use "browserslist" field in package.json "autoprefixer": {},
// 需要添加的内容 'postcss-px2rem-exclude': { remUnit: 75, exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件 } } }
（1） 因为第三方 ui 库的meta 都是 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ，使用 flexible 之后会自动添加 meta，当meta 缩放是0.5的时候，就会缩小。
（2） remUnit 在这里要根据 lib-flexible 的规则来配制，如果设计稿是750px的，用75就刚刚好。
（3） 如果不想 让 px 编译成 rem 。可以在这个样式后，加上/*no*/ 。例如 border:1px solid #ccc;/*no*/
（4） 注意，px2rem 插件 不能让 行内样式 和 js动态加入的 px单位转变成 rem。 如果实在要让 js 中的px单位转换成 rem，那么，可以用 设计稿中的 大小 来除以 remUnit 的大小，得到的就是 正常的 rem值。比如，我 750px 设计图上是 200的宽度，那么 rem 就是 200 / 75 = 2.666666。最后再拼接'rem'成字符串即可。
在第二步中还有的说法是：在 package.json 中配置如下代码：
"postcss": { "plugins": { "autoprefixer": {}, "postcss-px2rem-exclude": { "remUnit": 75, "exclude": "/node_modules|folder_name/i" } } }
不过，配置过后并未起作用。所以建议还是用前面的方法
7. 使用 lib-flexible 之后，在index.html中不要添加缩放的那个meta，插件会自动添加。否则会出现将 “将根据已有的meta标签来设置缩放比例” 的警告。
8. dcloud 5+ app 之分享功能。分享总共分三步（记住要先在 manifest.json 文件中的SDK配置中，把申请的分享的各种 appid、appkey等内容填写好）：
第一步：是获取分享服务列表，即 获取 qq，新浪微博，微信。这三个分享服务
第二步：判断该服务是否授权。如果授权就进入分享的函数，否则去获取授权
第三步：在授权成功的情况下，就进行分享。
完整的代码如下：
html 部分 <div v-for="(i,idx) in list" :key="'share_'+idx" @click="judegeAuthorize(list[idx].id)"></div> js 部分 data:function(){ let curPath = (location.origin + location.pathname).replace('index.html',''); //因为是打包成app，所以没有网络路径，如果要分享本地图片，就必须用这种方式来拼接本地图片的路径。 let imgPath = curPath + 'static/image/public/defaultHeader.png'; //分享的图片的路径 return{
shareLink:'http://www.baidu.com', //分享链接 list: [ { id: "weixin", imgurl: "static/image/public/msg_share_weixin.png", title: "微信", ex:'WXSceneSession' }, { id: "weixinFriends", imgurl: "static/image/public/msg_share_friends.png", title: "朋友圈", ex:'WXSceneTimeline' }, { id: "qq", imgurl: "static/image/public/msg_share_qq.png", title: "QQ" }, { id: "sinaweibo", imgurl: "static/image/public/msg_share_weibo.png", title: "微博" } ], shareOptions:{}, //分享渠道：微信、QQ、新浪微博 //qq分享的内容选项 qqOptions:{ title:'这是QQ分享的标题', //（必填，最长30个字符） content:'这是QQ分享的内容', //（可选，最长40个字符） thumbs: [imgPath], // 数组类型 href:this.shareLink }, //微信分享的内容选项 weixinOptions:{ title:'这是微信好友分享的标题', content:'这是微信好友分享的内容', thumbs: [imgPath], href:this.shareLink, extra:{ scene:"WXSceneSession" } }, // 微信朋友圈分享的内容选项 weixinFriendsOptions:{ title:'这是微信朋友圈分享的标题', content:'这是微信朋友圈分享的内容', thumbs: [imgPath], href:this.shareLink, extra:{ scene:"WXSceneTimeline" } }, //新浪微博分享的内容选项 sinaweiboOptions:{ content:'这是新浪微博分享的内容', href:this.shareLink, pictures: [imgPath] } } }, created:function(){ var that = this; if(window.plus){ // 扩展API加载完毕，现在可以正常调用扩展API plus.share.getServices(function(data){ var shareObj = {}; for(var i in data){ shareObj[ data[i].id ] = data[i]; } that.shareOptions = shareObj; }, function(){ plus.nativeUI.toast('获取分享服务列表失败') }) } }, methods:{ //处理分享功能 shareHandler:function(target,config){ target.send(config, function(msg){ plus.nativeUI.toast("分享到"+target.description+"成功"); },function(e){ console.log(e) let msg = e.code == -2 ? '已取消分享' : "分享到"+target.description+"失败"; plus.nativeUI.toast(msg); }); }, //判断是否授权 judegeAuthorize:function(id){ var target = this.shareOptions; if(JSON.stringify(target) == '{}'){ plus.nativeUI.toast("分享组件未准备好，请稍后再试"); return } let config = null; switch(id){ case 'weixin': config = this.weixinOptions; break; case 'weixinFriends': config = this.weixinFriendsOptions; id = 'weixin'; break; case 'qq': config = this.qqOptions; break; case 'sinaweibo': config = this.sinaweiboOptions; break; } var that = this; if(target[id].authenticated){ this.shareHandler(target[id],config); }else{ target[id].authorize( function(){ plus.nativeUI.toast("授权成功"); that.shareHandler(target[id],config); }, function(e){ plus.nativeUI.toast("授权失败"); }); } } }
注意事项：
（1） 朋友圈和微信好友的区别就是 扩展内容 extra 里的 scene 不同。
（2） 分享的图片路径，都是数组类型。
（3） 微信的分享，如果是直接返回，并没有分享，但是结果返回也是分享成功。新浪微博获取不了分享是否成功的状态，不知道是否我哪里弄错了。如果qq分享失败，查看参数是否正确，或者图片是否是数组类型。
（4） 可以不用官方的 document.addEventListener('plusready',function(){}) 来判断 plus是否准备好。可以直接判断 window.plus 来看plusready是否准备好。
9. 引入 mui.js 报错
引入：在 main.js 中导入 import mui from './assets/js/mui.js' 。然后报错了。 may not be accessed on strict mode
产生这样的原因是因为： vue-cli 使用了 babel 把es6 转成es5 ，默认的是使用的严格模式。解决的办法：在 .babelrc 文件中修改
增加忽略babel编译的文件：在与 plugins 同级的位置添加： "ignore":["./src/assets/js/mui.min.js"] 后面的就是 mui.min.js 的文件位置
然后就可以 把 mui 挂在到 Vue 原型上了。
10. 设置沉浸式导航栏
if(window.plus){ console.log('设置状态栏') plus.navigator.setStatusBarBackground('#fff');//设置状态栏背景颜色 plus.navigator.setStatusBarStyle('light');//设置状态栏字体颜色 }
（1） 状态栏字体颜色 只支持 light 和 dark 两个值。
（2） 如果在设置了 keep-alive 的组件页面中，有可能前面的页面会影响当前页面。那么可以在 activated，deactivated 的 方法里面再设置一次。
11. 打包成app之后，安卓后退键的处理。有两种方式：
第一种： 使用 5+ 监听安卓后退按钮。在vue的生命周期中调用
document.addEventListener('plusready', function() {
var first = null;
var webview = plus.webview.currentWebview();
plus.key.addEventListener('backbutton', function() {
webview.canBack(function(e) {
if (e.canBack) {
webview.back(); //这里不建议修改自己跳转的路径
} else {
//首次按键，提示‘再按一次退出应用’
if (!first) {
first = new Date().getTime(); //获取第一次点击的时间戳
plus.nativeUI.toast('再按一次退出应用', {
duration: 'short'
});
setTimeout(function() {
first = null;
}, 1000);
} else {
if (new Date().getTime() - first < 1000) {
//获取第二次点击的时间戳, 两次之差 小于 1000ms 说明1s点击了两次,
plus.runtime.quit(); //退出应用
}
}
}
})
});
})
（1） 这种不支持用 mui.openWindow 打开的页面的返回。除非 再去判断 是否有 指定ID 打开的webview plus.webview.getWebviewById('自定义的页面id') 。然后再去关闭指定ID的webview页面。 plus.webview.close('jmyc')
（2） 这种方式也有点问题，两次的点击时候需要小于1s才能后退。
第二种： 引入 mui 。在vue的生命周期中调用：
data:{ openWebView:false, //是否打开了页面 }, created:function(){ this.$mui.init({ beforeback: function(){ if(_this.openWebView){ //获得列表界面的webview jmyc var viewObj = plus.webview.getWebviewById('jmyc'); //canBack查询窗口是否可退 viewObj.canBack((event) => { var canBack = event.canBack; if(canBack) {//如可退，则返回上一页面 viewObj.back(); } else {//如不可退，则退出窗口 plus.webview.close('jmyc') _this.openWebView = false; } }) return false; } return true; } }); }
（1） 前提是mui已经在 main.js 中引入，并且挂在到了vue 原型上
import mui from './assets/js/mui.min.js'
Vue.prototype.$mui = mui
（2） 这种方式的好处就是，不用去判断是否超过一秒。
12. 路由的懒加载，实现按需加载。
// 实现路由懒加载 function lazyLoad(filename){ return () => import(`@/page/${filename}/index.vue`); } export default new Router({ routes: [ { path: '/index', name: 'indexToo', component: lazyLoad('index'), meta: { keepAlive: true // 需要被缓存 }, { path: '*', name: 'z_page404', //404页面 ， 必须放在最底部 component: lazyLoad('z_page404') } ] })
（1） 上面这种写法，是因为 每个 page 都新建了一个 index.vue 文件当做页面，然后文件夹以不同的名称来区分。
13. 需要缓存的页面的处理：
第一步： 需要缓存的才使用 keep - alive
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
第二步： 在 router.js中配置 meta
export default new Router({ routes: [ { path: '/index', name: 'index', component: lazyLoad('index'), meta: { keepAlive: true // 需要被缓存 } ] })
如果想某些页面动态来判断是否缓存： 比如，当前页面是 A ，需要缓存，但是从 B 页面返回来之后，A页面需要更新内容就不能缓存。在与 created 生命周期 同级上写。
// 如果路由进入前，是从 B页面返回来的，那么就设置当前 A 页面不缓存，否则缓存 beforeRouteEnter(to, from, next) { if(from.path == '/B'){ to.meta.keepAlive = false; }else{ to.meta.keepAlive = true; } next(); },
（1） 最后一定要调用 next() 方法。
14. 打包成app 之后，图片，css，js等路径不正确
如果没有修改其它的路径什么的，多半是config文件夹中index.js里面，build的assetsPublicPath路径为” /” 是绝对路径，把它改为相对路径 “./” 就可以了。然后重新打包
项目中，不管是img标签中的图片，还是 css中的背景图片，都需要使用相对路径
15. 如果想更方便的调试 5+ plus的效果：
建议在 5+ app 的 index.html 添加一个 a标签，href就是当前 项目运行的网络路径。 这样只用在基座上运行一次，然后项目每次修改，都可以看到效果。
如果是自定义基座，运行了之后，怕看不到控制台的内容，hbuilderX 自带有 webview 调试。运行之后，有个链接可以点击，就可以使用谷歌的 inspect 来调试
或者 使用 Vconsole 来调试
16. 断网的处理
data:{ networkStatus: false }, created:function(){ let that = this; document.addEventListener("netchange", function () { //监听网络变化事件 // 延迟二秒获取网络状态 setTimeout( () => { let target = plus.networkinfo.getCurrentType(); // 0 表示不认识的网络。 1表示未连接网络 if ( target == 0 || target == 1) { console.log('无网络连接',target) that.networkStatus = true; that.$store.commit('changeNetworkStatus',true); }else{ that.networkStatus = false; that.$store.commit('changeNetworkStatus',false); } },2000) }, false); }
（1） 用了vuex存放了当前网络状态。一般把断网的显示内容封装成一个组件，然后在这个组件里写入上面的内容。
（2） 然后在 APP.vue 中引入 组件。然后再根据 vuex中网络的状态，决定是否显示断网组件。
