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

独在公司加夜班，行行代码心甚寒。 不知功能什么时候完，杀了产品来祭天。

在前面的文章中，小编为你们带来了许多Vue 实战技巧，也获得了你们的许多好评。其实在前面那些技巧以外，咱们还能够作的更多，让咱们的开发流程更流畅，开发体验更好，项目性能更上一层楼，怎么作呢，咱们一块儿来看看。

阅读小编近期的热门Vue相关文章,感谢各位掘友和群友支持，每周一，不见不散

实战技巧，Vue原来还能够这样写 获赞 2600+

绝对干货~！学会这些Vue小技巧，能够早点下班和女神约会了 获赞 1200+

前方高能，这是最新的一波Vue实战技巧，不用则已，一用惊人 获赞 1050+

学会使用Vue JSX，一车老干妈都是你的 获赞650+

看到赚到！重读vue2.0风格指南，我整理了这些关键规则 获赞 150+

本文内容来源于小编开源的一个基于vant封装的开箱即用框架的一部分，本框架内部集成了包括：完整项目目录结构， 移动端适配，vant按需加载，mock,静态资源压缩，axios二次封装,工具类，cdn,代码规范,editorconfig等内容，能够作到下载即便用，无需作任何基础配置，欢迎你们使用，仓库地址 github.com/snowzijun/v…，若是喜欢，麻烦给小编一个star,小编会持续更新。

启用压缩，让页面加载更快

在咱们开发的时候，为了方便调试，咱们须要使用源码进行调试，但在生产环境，咱们追求的更多的是加载更快，体验更好，这时候咱们会将代码中的空格注释去掉，对待吗进行混淆压缩，只为了让js,css文件变得更小，加载更快。但只是这样作是不够的，咱们还能够作得更极致。

gzip是Web世界中使用的最为普遍的文件压缩算法，当前咱们使用的大多数服务端(好比nginx)和客户端(好比chrome)都已经支持了这个算法，因此若是咱们在打包Vue项目的时候，能够直接将全部的静态资源压缩为gzip,就能够极大的减小静态资源的大小，提高浏览器加载速度，那Vue项目如何配置呢？

添加vue.config.js 文件

在新建Vue项目中，默认是没有vue.config.js文件的，首先你须要在项目根目录新建一个vue.config.js文件，而后在文件中加入如下代码

module.exports = {
 } 复制代码

本文后面会屡次使用到vue.config.js文件，在后面将再也不赘述。

配置compression-webpack-plugin

• 安装 compression-webpack-plugin

  yarn add compression-webpack-plugin -D
  复制代码

• 配置

  修改vue.config.js文件为如下代码

  const CompressionWebpackPlugin = require('compression-webpack-plugin')
  const isProd = process.env.NODE_ENV === 'production' module.exports = {  configureWebpack: config => {  if (isProd) {  // 配置webpack 压缩  config.plugins.push(  new CompressionWebpackPlugin({  test: /\.js$|\.html$|\.css$/,  // 超过4kb压缩  threshold: 4096  })  )  }  } } 复制代码

• 查看压缩效果

  在配置上面的压缩以后，执行yarn build命令，会发现生成的静态文件里面新增了后缀为gz的文件

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

移动端适配

当前移动端比较流行的两种适配方式， 一种是将px转换为rem,另外一种是将px转换为vw,在开发项目时，我通常喜欢将px转换为vw,那么如何配置呢

安装 postcss-px-to-viewport

首先，你须要给项目安装postcss-px-to-viewport插件

yarn add postcss-px-to-viewport -D
复制代码

配置移动端适配

在项目根目录下面新建文件postcss.config.js,而后将如下代码加入到文件内

module.exports = {
 plugins: {  autoprefixer: {},  'postcss-px-to-viewport': {  // 视窗的宽度，对应的是咱们设计稿的宽度，咱们公司用的是375  viewportWidth: 375,  // 视窗的高度，根据750设备的宽度来指定，通常指定1334，也能够不配置  // viewportHeight: 1334,  // 指定`px`转换为视窗单位值的小数位数  unitPrecision: 3,  // 指定须要转换成的视窗单位，建议使用vw  viewportUnit: 'vw',  // 指定不转换为视窗单位的类，能够自定义，能够无限添加,建议定义一至两个通用的类名  selectorBlackList: ['.ignore'],  // 小于或等于`1px`不转换为视窗单位，你也能够设置为你想要的值  minPixelValue: 1,  // 容许在媒体查询中转换`px`  mediaQuery: false  }  } }  复制代码

配置完以后，重启服务，在浏览器中审查元素，能够看到原来写的px都转换成了vw

移动端无法调试，你须要 vConsole

有时候咱们开发的移动端项目在PC端浏览器显示的很正常，可是到了手机上就有问题了，这可就让人很纠结，只能盲改，如何能在手机上面查看log,查看接口请求等等，你须要使用vConsole

安装vConsole

vConsole是腾讯开发的一个用于调试移动端项目的插件，安装vConsole只需执行下面命令

yarn add vConsole -S
复制代码

在项目中使用

通常状况下vConsole只应用于开发环境，正式环境不会使用到，因此咱们只须要在开发环境下使用，如何使用呢？

打开main.js，而后在里面加入下面这段代码

// 开发环境下面使用vConsole进行调试
if (process.env.NODE_ENV === 'development') {  const VConsole = require('vconsole')  new VConsole() } 复制代码

而后启动项目，能够看到系统右下角会出现一个红色按钮，点开便可看到一系列调试所需的内容

忽略目录，让moment变得更小

使用过moment的同窗必定知道，moment的locale语言包特别大，可是咱们通常的项目只在国内用，也用不到那么多语言，是否是能够去掉呢？这时候你须要使用到webpack.IgnorePlugin。

在vue.config.js文件，你须要添加如下代码

const webpack = require('webpack')
module.exports = {  chainWebpack: config => {  // 优化moment 去掉国际化内容  config  .plugin('ignore')  // 忽略/moment/locale下的全部文件  .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))  } } 复制代码

咱们虽然按照上面的方法忽略了包含’./locale/'该字段路径的文件目录,可是也使得咱们使用的时候不能显示中文语言了，这时候若是想用某一种语言应该怎么办呢?

import moment from 'moment'
//手动引入所须要的语言包 import 'moment/locale/zh-cn'; // 指定使用的语言 moment.locale('zh-cn'); 复制代码

固然小编更建议在项目中使用更轻量级的day.js代替moment

生产环境删除console.log

开发环境为了调试，会添加大量的console.log，但若是console.log提交到生产环境里面，不只仅会影响到代码执行性能，并且可能会泄露一些核心数据，因此咱们更但愿的是在生产环境，将全部的console.log清除掉，怎么作呢？

安装插件

须要安装babel-plugin-transform-remove-console插件

yarn add babel-plugin-transform-remove-console -D
复制代码

配置babel.config.js

打开babel.config.js文件，而后在文件内添加

// 全部生产环境
const prodPlugin = []  if (process.env.NODE_ENV === 'production') {  // 若是是生产环境，则自动清理掉打印的日志，但保留error 与 warn  prodPlugin.push([  'transform-remove-console',  {  // 保留 console.error 与 console.warn  exclude: ['error', 'warn']  }  ]) }  module.exports = {  plugins: [  ...prodPlugin  ] } 复制代码

开启eslint,stylelint

看到这一条，有些同窗就有点受不了想退出了，配置这个不是本身给本身找不自在吗？在团队开发中，配置这些仍是颇有用的，制约团队中的每一个人都按照标准来开发功能，这样至少你们写的代码不至于相互看不懂（我深受不规范代码的折磨啊）。

完整仓库地址 github.com/snowzijun/v…

安装依赖

在配置这些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如下插件

• eslint
• stylelint
• Prettier - Code formatter

配置vscode

在vscode的setting文件里面添加如下代码

"eslint.enable":true,
"eslint.options": {  "extensions":[  ".js",  ".vue",  ".ts",  ".tsx"  ]  },  "eslint.validate": [  "javascript",  "javascriptreact",  "typescript",  "typescriptreact"  ],  "css.validate": true,  "scss.validate": true,  "less.validate": true,  "editor.codeActionsOnSave": {  "source.fixAll": true  }, 复制代码

配置eslint

首先在项目根目录下面添加 .eslintrc.js与.eslintignore文件

在.eslintrc.js文件内添加如下内容

// 缩略版
module.exports = {  root: true,  globals: {  process: true  },  parserOptions: {  parser: 'babel-eslint',  sourceType: 'module'  },  env: {  browser: true,  node: true,  es6: true  },  extends: ['plugin:vue/recommended', 'eslint:recommended'],  plugins: ['babel', 'prettier'],  rules:{  // 校验规则此处略  } } 复制代码

在.eslintignore文件中添加如下代码

.DS_Store
node_modules /dist  # local env files .env.local .env.*.local  # Log files npm-debug.log* yarn-debug.log* yarn-error.log*  # Editor directories and files .idea .vscode *.suo *.ntvs* *.njsproj *.sln *.sw? 复制代码

配置完以后，在package.json的script里面添加

"eslint": "vue-cli-service lint"
复制代码

而后执行yarn eslint就能够对代码进行格式化，固然vscode也会在你保存文件的时候校验一次

配置stylelint

限制js与vue是不够的，还须要限制如下style,感受这是本身给本身无限挖坑的举措，可是这东西越用越爽，一块儿来看看

首先在项目根目录下面新建.stylelintrc.js与.stylelintignore文件

在.stylelintrc.js文件中添加如下内容

module.exports = {
 extends: ["stylelint-config-standard","stylelint-config-recess-order"],  "plugins": [  "stylelint-scss"  ],  rules: {  // 校验规则略  } } 复制代码

.stylelintignore文件内容与.eslintignore文件内容一致

配置完以后，在package.json的script里面添加

"stylelint": "stylelint src/**/*.{html,vue,css,sass,scss} --fix",
复制代码

而后执行yarn stylelint就能够对样式进行格式化，固然vscode也会在你保存文件的时候校验一次

配置husky

在eslint,stylelint配置完以后，写代码时候vscode会自动校验格式化代码， 但就怕有人用其余编辑器没有配置插件，将未校验的代码提交到仓库里面，致使全部人的代码都爆红，这时候就须要使用husky在提交代码时候进行校验。

在git提交代码时候，会触发一系列hook钩子函数，而husky就是一个Git hooks工具。lint-staged是一个在git暂存文件上运行linters的工具,为何要用这个工具呢，由于咱们在提交代码的时候，只须要对已经修改过的文件进行校验，否则检查全部文件，比较浪费时间。那咱们改怎么配置呢？

你只须要在package.json文件里面添加如下代码

"husky": {
 "hooks": {  "pre-commit": "lint-staged",  "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"  }  },  "lint-staged": {  "*.{js,vue}": [  "vue-cli-service lint",  "git add -A"  ],  "*.{html,vue,css,sass,scss}": [  "yarn stylelint"  ]  } 复制代码

这时候你若是执行git commit -m '提交描述'的时候，会发现提交以前会调用eslint与stylelint进行代码校验，校验失败没法提交

仓库地址

本文全部代码均上传到github中，仓库地址 github.com/snowzijun/v…，本项目已在多个团队内使用，邀请您一块儿使用

结语

不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。 ——文森特・梵高

本文使用 mdnice 排版