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,不然无法显示
vue、gulp、webpack踩过的坑和笔记的更多相关文章
- vue+ vue-router + webpack 踩坑之旅
说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案 老司机可以忽略下面的内容了 1)起因 考虑到数据分离的问题 因为server是express搭的 自然少 ...
- vue+axios自己踩过的坑
axios的介绍就不用了吧,api有具体的介绍axios或者是axios中文: 主要讲的就是我自己在第一次使用axios中遇到的问题,及二次封装 先来说说二次封装,之前自己也是网上找了很多同学的封装, ...
- webpack踩过的坑(总结)
使用process.argv 获取命令行使用的参数 // 判断是否带production参数,production会压缩js var isprod = false; for (var i in pro ...
- vue+node+mongoose踩过的坑
1.当你在cmd中输入npm run dev的时候,出现这种错误 很有可能是目前的端口被占用了,可以把所有可能用到这个端口号的应用关闭或者你直接改一个新的端口号 修改端口的方法:新打开一个cmd,然后 ...
- 使用vue开发项目需要注意的问题和可能踩到的坑
最近,在公司给一些刚刚使用vue进行开发的同学做了一次分享, 其中包括一些vue开发中需要注意的点, 以及一些可能会踩到的坑.具体内容如下: 一.生命钩子使用需要注意的地方 1.beforeCreat ...
- 做一个gulp+webpack+vue的单页应用开发架子
1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...
- gulp+webpack+vue
gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleR ...
- 开始更新webpack踩坑笔记
今天开始学习webpack,记录下踩过的坑-zxf
- [坑况]——webpack搭建前端环境踩过的坑啊
前言 嘿哈,webpack搭建前端环境踩过的坑啊! 第一个:完全不知所措 webpack4 下面用不了HtmlWebpackPlugin 和 ExtractTextPlugin 解决方案: html- ...
随机推荐
- Mysql慢SQL分析及优化
为何对慢SQL进行治理 从数据库角度看:每个SQL执行都需要消耗一定I/O资源,SQL执行的快慢,决定资源被占用时间的长短.假设总资源是100,有一条慢SQL占用了30的资源共计1分钟.那么在这1分钟 ...
- 【题解】Luogu P3052 【USACO12】摩天大楼里的奶牛Cows in a Skyscraper
迭代加深搜索基础 题目描述 A little known fact about Bessie and friends is that they love stair climbing races. A ...
- 【Javascript + Vue】实现随机生成迷宫图片
前言 成品预览:https://codesandbox.io/s/maze-vite-15-i7oik?file=/src/maze.js 不久前写了一篇文章介绍了如何解迷宫:https://www. ...
- ffmpeg入门到实战-ffmpeg是怎么转码的?
阅读目录 视频是怎么被播放的? ffmpeg命令的格式 ffmpeg转码输出的过程 视频是怎么被播放的? 我们知道,当下大多数播放器都是基于ffmpeg二次开发的.你有没有想过,你用播放器打开一个视频 ...
- redis实现分布式锁天然的缺陷
redis分布式锁基本原理 采用 redis 实现分布式锁,主要是利用其单线程命令执行的特性,一般是 setnx, 只会有一个线程会执行成功,也就是只有一个线程能成功获取锁: 看着很完美 看看可能有什 ...
- 5、could not start the service mysql
1.这个原因是因为mysql多次安装没有卸载干净的原因; 2.解决办法是: (1)删除系统中已经安装的mysql目录中的内容: (2)同时按住"win+r"键调出"运行& ...
- echarts 根据geojson 数据绘制区域图(精确到镇)
步骤:1)先获取区域(县.镇)json数据 :2)使用echarts 绘制地图: 先上一波效果图(昆明市东川区) 一.获取区域json数据 1.下载工具"水经微图", 2.下载东川 ...
- JUnit5编写基本测试
JUnit5的测试不是通过名称,而是通过注解来标识的. 测试类与方法 Test Class:测试类,必须包含至少一个test方法,包括: 最外层的class static member class @ ...
- Java:HttpPost 传输Json数据过长使用HttpServletRequest解析
直接上代码 /** * 测试生成json数据 */ @Test public void synYxGoodsInfoTest() { try { String url = "http://1 ...
- Mybatis:Mybatis 逆向工程 generator配置
一.使用Maven方式引入Mybatis依赖Jar包(版本号自己改或定义)