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- ...
随机推荐
- [Abp vNext 源码分析] - 20. 电子邮件与短信支持
一.简介 ABP vNext 使用 Volo.Abp.Sms 包和 Volo.Abp.Emailing 包将短信和电子邮件作为基础设施进行了抽象,开发人员仅需要在使用的时候注入 ISmsSender ...
- 自动按需引入组件用不了(Vant)
按照官网的自动按需引入之后,这样写是报错的,直接在vue页面中这样引用也是报错的. 正确的使用方法是这样的
- 什么是CAP?
1. 什么是CAP 是一种定理,多用于描述分布式架构,CAP这三个字母对应三种理念,且这三种理念只能两两组合,不能CAP三种理念同时共存(为什么?下面说). C:Consisteny(一致性) A:A ...
- hdu 6092 Rikka with Subset 01背包 思维
dp[i][j]表示前i个元素,子集和为j的个数.d[i][j] = d[i][j] + d[i-1][j-k] (第i个元素的值为k).这里可以优化成一维数组 比如序列为 1 2 3,每一步的dp值 ...
- AcWing 1273. 天才的记忆
从前有个人名叫 WNB,他有着天才般的记忆力,他珍藏了许多许多的宝藏. 在他离世之后留给后人一个难题(专门考验记忆力的啊!),如果谁能轻松回答出这个问题,便可以继承他的宝藏. 题目是这样的:给你一大串 ...
- CentOS-Docker搭建Nacos-v1.1.4(单点)
通用属性配置(v1.1.4) name description option MODE cluster模式/standalone模式 cluster/standalone default cluste ...
- linux 之sed用法
sed:Stream Editor文本流编辑,sed是一个"非交互式的"面向字符流的编辑器.在使用sed处理时,它把当前处理的行存储在临时缓冲区中,称为"模式空间&quo ...
- 使用robot合并Robot Framework测试报告
p.p1 { margin: 0; font: 17px ".PingFang SC" } p.p2 { margin: 0; font: 12px "Helvetica ...
- .NET 6 Preview 6 正式发布: 关注网络开发
微软.NET 团队的项目经理在博客上发布了.NET 6 Preview 6, 在候选发布阶段之前的倒数第二个预览版,也就是8月份还会发布一个Preview 7,9月份开始进入RC,两个候选版本将专注 ...
- Mongo基于Java基本操作
1.使用Maven依赖相应jar <dependency> <groupId>org.mongodb</groupId> <artifactId>mon ...