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服務就行了。

3.用yarn裝@vue/cli，會報vue: command not found，需要換成npm裝

4.項目中添加standard規則

vue invoke eslint --config standard
主要做了以下事情
1. 在eslint配置中添加了extends: ['@vue/standard']
2. 安裝了依賴：
@vue/eslint-config-standard 
eslint-plugin-import 
eslint-plugin-node 
eslint-plugin-promise
eslint-plugin-standard

 5. 函數式組件必須返回createElement函數生成的vnode，不然無法顯示