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分离时
16.react+@craco/craco项目升级到webpack5时开发环境运行正常,但是浏览器访问报 localhost已拒绝连接,经过多方排查,最终发现是新语法setupMiddlewares导致的,用onBeforeSetupMiddleware重写相关方法后项目可以正常运行
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,不然无法显示