vue+webpack踩坑实录（不按期更新）

vue-cli2.9.1如何自动打开浏览器及实现手机调试

　　在vue-cli2.9.1之前咱们运行 “npm run dev” 程序会自动打开浏览器进行调试，并且在手机浏览器输入 “IP地址:8080” 能实如今手机端的调试，但是升级到vue-cli2.9.1后一切都不同了，浏览器须要手动输入网址调试，手机端输入 “IP地址:8080” 已经不能打开页面了。有没有顿时感受整个开发过程都不爽了，老是以为哪不得劲（不能装B了）。其实修改下配置还能象之前同样流畅的开（装）发（B）的。

　　打开 “config/index.js” 找到 “autoOpenBrowser” 属性，把它的值改成 true，“npm run dev” 后发现能自动打开浏览器了。

　　仍是 “config/index.js” 文件，把 host 的值改成你电脑在局域网中的 ip，从新 “npm run dev” 后在手机端输入 “IP地址:8080” 也能正常打开了。

 

复制项目从新安装依赖出错

　　不知道有没有人跟我同样当须要用另外一台电脑调试项目，把项目从一台电脑复制到另外一台电脑时，npm i 后， npm run dev 总出现 “This dependency was not found：* !!vue-style-loader!css-loader?{"sourceMap":true}! 。......” 错误，这是由于sass安装出错（用stylus的同窗也会出现相似的错误），npm i 安装好各类依赖后，要单独再安装下 node-sass（npm install node-sass --save-dev） 和 sass-loader （npm install sass-loader --save-dev），若是还不行建议用cnpm安装。

 

vue在IE中显示空白或不能跳转

　　前几天用脚手架的 webpack-simple 模板构建了一个项目，发如今IE9下面 router-link 跳转无效，鼓捣了好久没解决，网上搜了下终于搞定，现记录以下：

　　一、安装 babel-polyfill： cnpm i babel-polyfill --save-dev

　　二、在webpack.config.js或webpack.base.conf.js里修改enjoy：

  entry: {
    // app: './src/main.js'
    app: ['babel-polyfill', './src/main.js']
  },

　　三、或者在main.js里引入babel-polyfill： import 'babel-polyfill'

　　按上述方法操做若是在IE10如下浏览器仍是显示空白，说明是webpack server的问题，npm run build打包后上传至服务器再用IE测试应该是正常显示的。

 

兼容IE的data写法

　　通常状况下我喜欢这么写：

data () {

　　return {

　　　　abc: 'xyz'

　　}

}

　　但是有一天我惊奇的发如今IE11里竟然报错：缺乏‘:’。因而我改为这样：

data: () => {

　　return {

　　　　abc: 'xyz'

　　}

}

　　仍是报语法错误，再改：

data: function  ()  {

　　return {

　　　　abc: 'xyz'

　　}

}

　　这下不报错了，汗一个（我使用的IE版本是IE11.0.19）。进一步研究发现：

　　一、不只 data 必须按第三种写法，全部对象中的函数都必须以第三种写法在IE11里才保证不会出错；

　　二、只有插件开发才会出现这种状况，若是是在普通组件中不会报错。

 

ref 名称不能与组件同名

　　ref若是与组件同名，可能致使不能调用子组件中的方法，以下代码，若执行 this.$refs.slider.anyMethods()会报错：anyMethods is not a function

<template>
    <div>
        <!-- 下面一行代码是错误的写法 -->
        <slider ref="slider"></slider>
        <!-- 下面一行代码是正确的写法 -->
        <slider ref="slid"></slider>
    </div>
</template>
<script>
import Slider from './slider'

export default {
    components: { Slider }
}
</script>

 

router-link上click事件无效

　　在 router-link 上添加 @click、@touchmove 等原生事件均无效，须要加上修饰符 native 才行，即： @click.native="..."。