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

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

回到顶部