vue、gulp、webpack踩過的坑和筆記

1.監聽流錯誤 stream-combiner2

2.熱更新Browsersync與element衝突，換成gulp-connect

3.gulp-uglify壓縮js不能壓縮es6

4.使用vue-cli 運行npm run build --report 能夠輸出構建狀況 瀏覽器自動訪問 http://127.0.0.1:8888

5.在使用vue-cli建立項目時，git中use arrow keys選項在windows中 keys爲序號，好比輸入1而後按enter會選擇第一個，依次類推

6.vue-cli中import()報錯eslint: parsing error: unexpected token import或者Parsing Error inside template tag須要加配置 https://github.com/vuejs/eslint-plugin-vue/issues/186

parserOptions: {
  parser: 'babel-eslint'
}

7.webpack4 中mode能夠經過cli命令--mode設置，也能夠在配置文件中添加mode選項

18.webpack鍾bundle分析地址https://www.webpackjs.com/guides/code-splitting/

9.CommonsChunkPlugin分離公共塊時，async和filename衝突，children和chunks衝突，規定了async而name不是入口chunk時，name的名字不起做用

10.HtmlWebpackPlugin生成html時，就是有時不按順序插入用 chunksSortMode: 'manual'

11.vue模板中用scss語法設置爲 lang="scss" type="text/scss"，否則會報語法錯誤

12.vuex的狀態值不能爲組件實例，不然會報錯

13.vue項目的擴大，熱更新老是報錯FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory，致使須要頻繁重啓，解決方法

把package.json中
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
改成
"dev": "node --max-old-space-size=4096 ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --progress --config build/webpack.dev.conf.js",
用以解除v8的內存限制

14.vue中報parsing error: unexpected token <錯誤，是由於.eslintrc和package.json中的eslintConfig並非融合關係，保留一個 

15.vue-cli升級webpack4，生產環境cacheGroups中緩存模塊名字不起做用，是由於

chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') //webpack3中用CommonsChunkPlugin分離時

chunkFilename: utils.assetsPath('js/[name].[chunkhash].js') //webpack4中用splitChunks分離時

 

 

vue/cli3.x

1.devserver代理中能夠用cookieDomainRewrite、cookiePathRewrite來重寫服務端中發來的cookie

2.安裝@vue/cli-plugin-pwa後在service-worker本身配置的https中報 An SSL certificate error occurred when fetching the script.錯誤。若是是本地測試的話只用部署個普通的http服務就好了。