最近在学习vue开发过程中遇到的一些问题集合，当然以下问题都是利用官方提供vue-cli脚手架构建项目的前提下进行。
1、input文本框不可以使用动态的type
<input :type="[type==='text'?'text':'password']" v-model="pass" />以上这么使用是会被报错的：v-model does not support dynamic input types. Use v-if branches instead.
这就是说使用v-model的type是不能用动态的type标签，只能使用v-if代替，因此如果想要做密码框类型切换只能使用如下方式
<input class="pass" type="text" name="pass" v-model="pass" required v-if="type==='text'" />
<input class="pass" type="password" name="pass" v-model="pass" required v-if="type==='password'" />2、执行打包后，发现index.html的引用路径都是绝对路径，相对到根目录下，这么一来，就没办法将项目放置到多层级目录下。这时候只要修改下打包配置命令即可，具体找到config/index.js配置文件，找到如下控制属性并调整：
assetsPublicPath: '',//打包后index的引用文件变成相对路径3、vue-cli+vue-router构建的hash模式的项目下，开发微信oauth2.0自动授权登陆操作，当微信回调回我们的项目页的时候发现一直获取不到code值导致一直重复跳转授权允许页而进入死循环。最后打印当前地址，发现code参数被写入到#号前面了，具体看下图：
找了好多博客问了好多人都说没办法解决，只能自己截取参数，最后也在官网找到如下说明：
大概是考虑在正常的网页规则上来处理的，例如：a.html?a=xxx&b=111#aaa这种格式，因此到了vue-router的hash路由上就出现问题了，希望未来微信方面能针对该种路由做出调整
当然还有一种方案就是把回调地址设定为服务器接口地址，让微信授权登陆后跳回服务器上，然后在通过服务器重定向到我们的前端页上来。目前这种方案本人还未实践过。
虽然我的自动授权登陆成功了，但是在微信分享上，我在苹果5s和苹果6s plus上的机型测试后，能成功自定义分享，但是无法进入success回调，原因不明。在苹果4s并未发生此类事情。。。希望有知情的网友可以留言告知下~
===========================2017-11-11================================
今天重新调试苹果5以上机型发现也是能正常分享，可是并没有执行success回调的，具体配置和演示如下：
一开始我在回调里面都是用alert弹窗的形式来判断是否进入回调，在安卓机子和苹果4s机型上都能正常弹值，具体如下：
然而在苹果5以上机型都是只能看到这部分的弹值。最后执行success回调的alert并没有被弹值。
然后我觉得不对劲，不应该自定义分享能成功而无法进入success回调，于是我换了另外一种方式来判断，就是我在页面上隐藏一串文本，等到分享成功后在success回调里面在把这串文本显示出来。果然，我的猜测是对的，从苹果5分享后，文本显示出来了。。。演示如下：
以上，我要说的是，
苹果5以上机型回调不会执行alert弹值啊，原因不明！！！
苹果5以上机型回调不会执行alert弹值啊，原因不明！！！
苹果5以上机型回调不会执行alert弹值啊，原因不明！！！
重要的事情说三遍，以后要调试微信分享之类的回调里面不能采用alert形式调试了，只能采取先隐藏文本在回调里面去显示文本的形式来调试了。
3-2、有遇到一个情况是，安卓自定义分享成功，文本描述都是自定义的，但是在ios中能分享成功，可是文本描述都不是我们自定义的内容，找来找去，最后发现在ios中，link里面的参数不能夹带中文文本。。。这个有点坑，最终解决办法是将中文转码下。
4、vue-cli项目如果动态设置index.html的标题
我在网络上有找到一种方式，是在路由配置里面先写好标题，具体做法如下：
在router/index.js路由里面做好如下设置：
export default new Router({
//mode: 'history',
routes: [
{
path: '/wxPlan',
name: 'wxPlan',
meta: {title: '路线规划'},
component: wxPlan
},
]
})router.beforeEach((to, from, next)=>{
window.document.title=to.meta.title;
next();
});不过这种不适合新闻详情类的页面。最后经网友提醒，我们可以直接在mounted生命周期内或者是在axios请求得到数据后直接按照如下方式设置：
document.title='some dynamic title';5、使用watch响应路由参数的变化，这时候会有个问题，加入点击的区域在页面底部，那么页面是会一直停留在底部的，没办法自动回到顶部。
解决办法：直接操作body设置scrollTop直接跳转到页面的顶部。具体做法如下：
watch:{
'$route'(){
this.fetchData();
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}6、修改vue-awesome-swiper插件中小圆点的样式？
要修改vue-awesome-swiper轮播插件的小圆点，你的style样式不能放在隔离作用域的，需要单独在一个style里面设置。具体做法如下：
<style lang="styl">//这里后面不能加scoped属性，否则怎么改都无效
.swiper-pagination
text-align right
.swiper-pagination-bullet
background #fff
opacity 1
&.swiper-pagination-bullet-active
background #FFA46B
</style>7、最近开发的vue项目在微信浏览器中字体粗细表现很不一致，英文和数字字体会变的非常细，中文正常。
一开始以为是字体的原因，然后直接把设置的字体都删掉跟随系统字体，还是一样。最后在reset.css中发现我在body里面吧font-weight强制设置为100导致的。只要把这个设置删掉就好了
8、关于在style中使用scoped后，animation动画在移动端的浏览器里头失效问题。
情景复现，我写了如下代码：
<style scoped>
.logo-before {
width: 4.8rem;
height: 4.8rem;
animation: sploosh2 1.5s ease infinite;
animation-fill-mode: both;
}
@keyframes sploosh2{
0% {
width: 3.6rem;
height: 3.6rem;
}
100% {
width: 4.8rem;
height: 4.8rem;
}
}
</style>但是最终被编译成了如下代码，带导致手机浏览器动画无效：
<style type="text/css">
.logo-before {
width: 4.8rem;
height: 4.8rem;
-webkit-animation: sploosh2-data-v-xxx 1.5s ease infinite;
animation: sploosh2-data-v-xxx 1.5s ease infinite;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-@keyframes sploosh2{//由于这里没有被加上-data-v-xxx导致手机浏览器动画失效
0% {
width: 3.6rem;
height: 3.6rem;
}
100% {
width: 4.8rem;
height: 4.8rem;
}
}
@keyframes sploosh2-data-v-xxx{
0% {
width: 3.6rem;
height: 3.6rem;
}
100% {
width: 4.8rem;
height: 4.8rem;
}
}
</style>解决办法：我多增加如下一句话，而不让vue自动帮我们去增加：
-webkit-animation: 1.5s sploosh2 ease 0s;//这里我将动画的名称放在了第二位，vue编译完后，这个动画名称是不会加上-data-v-xxx值的，这样就能兼容移动端的浏览器了。
==========================2017-12-20======================
今天去vue-loader发布了一个issues，被告知说在最新版已经修复了这个问题。我重新下载了脚手架测试，经测试发现vue-loader为13.3.0版本已经生效。如果有遇到这种情况的，请自行更新依赖~