我在项目中是这样配置 Vue 的

独在公司加夜班,行行代码心甚寒。
不知功能何时完,杀了产品来祭天。
公司前端项目比较多,每个团队都会自己搭建一套属于自己团队的项目框架,导致公司项目五花八门,跨团队协作难上加载,所以小编整理了一个开箱即用的框架,用于统一所有的团队,那这个框架是怎么配置的呢,我们一起来看看。
本文内容来源于小编开源的一个基于
vant封装的开箱即用框架的一部分,本文中提取了部分功能,完整代码,请查看 https://github.com/snowzijun/vue-vant-base
启用压缩,让页面加载更快
在我们开发的时候,为了方便调试,我们需要使用源码进行调试,但在生产环境,我们追求的更多的是加载更快,体验更好,这时候我们会将代码中的空格注释去掉,对待吗进行混淆压缩,只为了让js,css文件变得更小,加载更快。但只是这样做是不够的,我们还可以做得更极致。
gzip是Web世界中使用的最为广泛的文件压缩算法,当前我们使用的大多数服务端(比如nginx)和客户端(比如chrome)都已经支持了这个算法,所以如果我们在打包Vue项目的时候,可以直接将所有的静态资源压缩为gzip,就可以极大的减少静态资源的大小,提升浏览器加载速度,那Vue项目如何配置呢?
添加vue.config.js 文件
在新建Vue项目中,默认是没有vue.config.js文件的,首先你需要在项目根目录新建一个vue.config.js文件,然后在文件中加入以下代码
本文后面会多次使用到vue.config.js文件,在后面将不再赘述。
配置compression-webpack-plugin
安装
compression-webpack-plugin
配置
修改vue.config.js文件为以下代码
查看压缩效果
在配置上面的压缩之后,执行yarn build命令,会发现生成的静态文件里面新增了后缀为gz的文件

如果此时将项目部署到已开启了gzip的服务器如nginx里面之后,访问浏览器即可看到浏览器下载的是已压缩的文件

移动端适配
当前移动端比较流行的两种适配方式, 一种是将px转换为rem,另一种是将px转换为vw,在开发项目时,我一般喜欢将px转换为vw,那么如何配置呢
安装 postcss-px-to-viewport
首先,你需要给项目安装postcss-px-to-viewport插件
配置移动端适配
在项目根目录下面新建文件postcss.config.js,然后将以下代码加入到文件内
配置完之后,重启服务,在浏览器中审查元素,可以看到原来写的px都转换成了vw

忽略目录,让moment变得更小
使用过moment的同学一定知道,moment的locale语言包特别大,但是我们一般的项目只在国内用,也用不到那么多语言,是不是可以去掉呢?这时候你需要使用到webpack.IgnorePlugin。
在vue.config.js文件,你需要添加以下代码
我们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录,但是也使得我们使用的时候不能显示中文语言了,这时候如果想用某一种语言应该怎么办呢?
当然小编更建议在项目中使用更轻量级的day.js代替moment
生产环境删除console.log
开发环境为了调试,会添加大量的console.log,但如果console.log提交到生产环境里面,不仅仅会影响到代码执行性能,而且可能会泄露一些核心数据,所以我们更希望的是在生产环境,将所有的console.log清除掉,怎么做呢?
安装插件
需要安装babel-plugin-transform-remove-console插件
配置babel.config.js
打开babel.config.js文件,然后在文件内添加
开启eslint,stylelint
看到这一条,有些同学就有点受不了想退出了,配置这个不是自己给自己找不自在吗?在团队开发中,配置这些还是很有用的,制约团队中的每个人都按照标准来开发功能,这样至少大家写的代码不至于相互看不懂(我深受不规范代码的折磨啊)。
安装依赖
在配置这些lint之前,你需要安装这些插件
@vue/cli-plugin-eslint
@vue/eslint-config-prettier
babel-eslint
eslint
eslint-plugin-babel
eslint-plugin-prettier
eslint-plugin-vue
husky
lint-staged
prettier
stylelint
stylelint-config-recess-order
stylelint-config-standard
stylelint-prettier
stylelint-scss
同时还需要给vscode以下插件
eslintstylelint
Prettier - Code formatter
配置vscode
在vscode的setting文件里面添加以下代码
配置eslint
首先在项目根目录下面添加 .eslintrc.js与.eslintignore文件
在.eslintrc.js文件内添加以下内容
在.eslintignore文件中添加以下代码
配置完之后,在package.json的script里面添加
然后执行yarn eslint就可以对代码进行格式化,当然vscode也会在你保存文件的时候校验一次
配置stylelint
限制js与vue是不够的,还需要限制以下style,感觉这是自己给自己无限挖坑的举措,但是这东西越用越爽,一起来看看
首先在项目根目录下面新建.stylelintrc.js与.stylelintignore文件
在.stylelintrc.js文件中添加以下内容
.stylelintignore文件内容与.eslintignore文件内容一致
配置完之后,在package.json的script里面添加
然后执行yarn stylelint就可以对样式进行格式化,当然vscode也会在你保存文件的时候校验一次
配置husky
在eslint,stylelint配置完之后,写代码时候vscode会自动校验格式化代码, 但就怕有人用其他编辑器没有配置插件,将未校验的代码提交到仓库里面,导致所有人的代码都爆红,这时候就需要使用husky在提交代码时候进行校验。
在git提交代码时候,会触发一系列hook钩子函数,而husky就是一个Git hooks 工具。lint-staged 是一个在git暂存文件上运行linters的工具,为什么要用这个工具呢,因为我们在提交代码的时候,只需要对已经修改过的文件进行校验,不然检查所有文件,比较浪费时间。那我们改怎么配置呢?
你只需要在package.json文件里面添加以下代码
这时候你如果执行git commit -m '提交描述'的时候,会发现提交之前会调用eslint与stylelint进行代码校验,校验失败无法提交
结语
不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高
版权声明: 本文为 InfoQ 作者【前端有的玩】的原创文章。
原文链接:【http://xie.infoq.cn/article/fbda0b947903e3adc3488ae91】。文章转载请联系作者。











评论 (7 条评论)