vue webpack 自动打开页面_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 跳转无效，鼓捣了很久没解决，网上搜了下终于搞定，现记录如下：

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

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

entry: {

// app: './src/main.js'

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

},

3、或者在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)。进一步研究发现：

1、不仅 data 必须按第三种写法，所有对象中的函数都必须以第三种写法在IE11里才保证不会出错；

2、只有插件开发才会出现这种情况，如果是在普通组件中不会报错。

ref 名称不能与组件同名

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

components: { Slider }

}

router-link上click事件无效

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