我在項目中是這樣配置Vue的

獨在公司加夜班，行行代碼心甚寒。不知功能何時完，殺了產(chǎn)品來祭天。

在前面的文章中，我為大家?guī)砹嗽S多Vue 實戰(zhàn)技巧，也得到了大家的許多好評，但中間還是存在著些許漏洞，在此向大家表示歉意。其實在前面那些技巧之外，我們還可以做的更多，讓我們的開發(fā)流程更流暢，開發(fā)體驗更好，項目性能更上一層樓，怎么做呢，我們一起來看看。

閱讀小編近期的熱門Vue相關(guān)文章,感謝各位掘友和群友支持，每周一，不見不散

實戰(zhàn)技巧，Vue原來還可以這樣寫 獲贊 2400+

絕對干貨~！學(xué)會這些Vue小技巧，可以早點下班和女神約會了 獲贊 1150+

前方高能，這是最新的一波Vue實戰(zhàn)技巧，不用則已，一用驚人 獲贊 1000+

學(xué)會使用Vue JSX，一車?yán)细蓩尪际悄愕?獲贊600+

看到賺到！重讀vue2.0風(fēng)格指南，我整理了這些關(guān)鍵規(guī)則 獲贊 150+

本文內(nèi)容來源于小編將開源的一個基于vant封裝的開箱即用框架的一部分，本框架內(nèi)部集成了包括：完整項目目錄結(jié)構(gòu)， 移動端適配，vant按需加載，mock,靜態(tài)資源壓縮，axios二次封裝,日期工具類，cdn,代碼規(guī)范等內(nèi)容，可以做到下載即使用，無需做任何基礎(chǔ)配置，歡迎大家使用，倉庫地址 https://github.com/snowzijun/vue-vant-base，如果喜歡，麻煩給小編一個star,小編會持續(xù)更新。

啟用壓縮，讓頁面加載更快

在我們開發(fā)的時候，為了方便調(diào)試，我們需要使用源碼進行調(diào)試，但在生產(chǎn)環(huán)境，我們追求的更多的是加載更快，體驗更好，這時候我們會將代碼中的空格注釋去掉，對待嗎進行混淆壓縮，只為了讓js,css文件變得更小，加載更快。但只是這樣做是不夠的，我們還可以做得更極致。

gzip是Web世界中使用的最為廣泛的文件壓縮算法，當(dāng)前我們使用的大多數(shù)服務(wù)端(比如nginx)和客戶端(比如chrome)都已經(jīng)支持了這個算法，所以如果我們在打包Vue項目的時候，可以直接將所有的靜態(tài)資源壓縮為gzip,就可以極大的減少靜態(tài)資源的大小，提升瀏覽器加載速度，那Vue項目如何配置呢？

添加vue.config.js 文件

在新建Vue項目中，默認(rèn)是沒有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
          })
        )
      }
    }
  }
  

• 查看壓縮效果

  在配置上面的壓縮之后，執(zhí)行yarn build命令，會發(fā)現(xiàn)生成的靜態(tài)文件里面新增了后綴為gz的文件

  

  如果此時將項目部署到已開啟了gzip的服務(wù)器如nginx里面之后，訪問瀏覽器即可看到瀏覽器下載的是已壓縮的文件

  

讓moment變得更小

使用過moment的同學(xué)一定知道，moment的locale語言包特別大，但是我們一般的項目只在國內(nèi)用，也用不到那么多語言，是不是可以去掉呢？這時候你需要使用到webpack.IgnorePlugin。

在vue.config.js文件，你需要添加以下代碼

const webpack = require('webpack')
module.exports = {
  chainWebpack: config => {
    // 優(yōu)化moment 去掉國際化內(nèi)容
    config
    .plugin('ignore')
    // 忽略/moment/locale下的所有文件
    .use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
  }
}

我們雖然按照上面的方法忽略了包含’./locale/'該字段路徑的文件目錄,但是也使得我們使用的時候不能顯示中文語言了，這時候如果想用某一種語言應(yīng)該怎么辦呢?

import moment from 'moment'
//手動引入所需要的語言包
import 'moment/locale/zh-cn';
// 指定使用的語言
moment.locale('zh-cn');

當(dāng)然小編更建議在項目中使用更輕量級的day.js代替moment

生產(chǎn)環(huán)境刪除console.log

開發(fā)環(huán)境為了調(diào)試，會添加大量的console.log，但如果console.log提交到生產(chǎn)環(huán)境里面，不僅僅會影響到代碼執(zhí)行性能，而且可能會泄露一些核心數(shù)據(jù)，所以我們更希望的是在生產(chǎn)環(huán)境，將所有的console.log清除掉，怎么做呢？

安裝插件

需要安裝babel-plugin-transform-remove-console插件

yarn add babel-plugin-transform-remove-console -D

配置babel.config.js

打開babel.config.js文件，然后在文件內(nèi)添加

// 所有生產(chǎn)環(huán)境
const prodPlugin = []

if (process.env.NODE_ENV === 'production') {
  
// 如果是生產(chǎn)環(huán)境，則自動清理掉打印的日志，但保留error 與 warn
  prodPlugin.push([
    'transform-remove-console',
    {
      exclude: ['error', 'warn']
    }
  ])
}

module.exports = {
   plugins: [
     ...prodPlugin
   ]
}

開啟eslint,stylelint

看到這一條，有些同學(xué)就有點受不了想退出了，配置這個不是自己給自己找不自在嗎？在團隊開發(fā)中，配置這些還是很有用的，制約團隊中的每個人都按照標(biāo)準(zhǔn)來開發(fā)功能，這樣至少大家寫的代碼不至于相互看不懂（我深受不規(guī)范代碼的折磨啊）。

本節(jié)所有代碼在github倉庫中已上傳，完整代碼請查看 https://github.com/snowzijun/vue-vant-base

安裝依賴

在配置這些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文件內(nèi)添加以下內(nèi)容

// 縮略版
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:{
    // 校驗規(guī)則此處略
 }
}

在.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"

然后執(zhí)行yarn eslint就可以對代碼進行格式化，當(dāng)然vscode也會在你保存文件的時候校驗一次

配置stylelint

限制js與vue是不夠的，還需要限制以下style,感覺這是自己給自己無限挖坑的舉措，但是這東西越用越爽，一起來看看

首先在項目根目錄下面新建.stylelintrc.js與.stylelintignore文件

在.stylelintrc.js文件中添加以下內(nèi)容

module.exports = {
  extends: ["stylelint-config-standard","stylelint-config-recess-order"],
  "plugins": [
    "stylelint-scss"
  ],
  rules: {
    // 校驗規(guī)則略
  }
}

.stylelintignore文件內(nèi)容與.eslintignore文件內(nèi)容一致

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

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

然后執(zhí)行yarn stylelint就可以對樣式進行格式化，當(dāng)然vscode也會在你保存文件的時候校驗一次

配置husky

上面配置完之后，寫代碼時候vscode會自動校驗格式化代碼， 但就怕有人用其他編輯器沒有配置插件，將未校驗的代碼提交到倉庫里面，導(dǎo)致所有人的代碼都爆紅，這時候就需要使用husky在提交代碼時候進行校驗。

在git提交代碼時候，會觸發(fā)一系列hook鉤子函數(shù)，而husky就是一個Git hooks工具。lint-staged是一個在git暫存文件上運行l(wèi)inters的工具,為什么要用這個工具呢，因為我們在提交代碼的時候，只需要對已經(jīng)修改過的文件進行校驗，不然檢查所有文件，比較浪費時間。那我們改怎么配置呢？

你只需要在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"
    ]
  }

這時候你如果執(zhí)行git commit -m '提交描述'的時候，會發(fā)現(xiàn)提交之前會調(diào)用eslint與stylelint進行代碼校驗，校驗失敗無法提交

結(jié)語

不要吹滅你的靈感和你的想象力; 不要成為你的模型的奴隸?！纳?梵高