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="..."。