vue、gulp、webpack踩过的坑和笔记

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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，不然无法显示

以上是 vue、gulp、webpack踩过的坑和笔记 的全部内容， 来源链接： utcz.com/z/380790.html

回到顶部