我在项目中是这样配置Vue

在开发vue项目的时候，对整个项目会有一些配置。这对整个项目是有很大的帮助的
一、启用gzip压缩，让页面加载更快
一般来说，gzip的开启只要服务端去做就好，但是服务端需要先根据设置好的压缩等级去压缩文件，然后再将压缩文件返回到浏览器。而这里，webpack的CompressionWebpackPlugin插件可以帮我们生成gzip的压缩文件。可以如果提前将压缩文件存放在服务器中，服务器在处理请求的时候将节省资源的压缩时间，直接读取服务器上的.gz文件。
在vue-cli2中，只需要将config/index.js中的productionGzip配置项改为true即可。见博客https://blog.csdn.net/zaoqinghuan/article/details/103738864
在vue3中添加vue.config.js 文件
1、npm i compression-webpack-plugin -D
2、配置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: /.jsKaTeX parse error: Can't use function '\.' in math mode at position 2: |\̲.̲html|.css$/,
// 超过4kb压缩
threshold: 4096
})
)
}
}
}
3、在配置上面的压缩之后，执行npm run build命令，会发现生成的静态文件里面新增了后缀为gz的文件

如果此时将项目部署到已开启了gzip的服务器如nginx里面之后，访问浏览器即可看到浏览器下载的是已压缩的文件
二、生产环境删除log
1、安装uglifyjs-webpack-plugin： npm i uglifyjs-webpack-plugin -D
2、配置vue.config.js
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’)

三、开启eslint,stylelint
在团队开发中，配置这些还是很有用的，制约团队中的每个人都按照标准来开发功能，让代码具有可读性和维护性
参考链接：https://juejin.cn/post/6892000216020189198/#heading-3

1、安装依赖 npm i xxx -D

2、vscode配置
ctrl+shift+p 打开setting.json 配置
“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文件
1、在.eslintrc.js文件内添加以下内容
module.exports = {
root: true,
env: {
node: true
},
‘extends’: [
‘plugin:vue/essential’,
‘@vue/standard’
],
rules: {
‘no-console’: process.env.NODE_ENV === ‘production’ ? ‘off’ : ‘off’,
‘no-debugger’: process.env.NODE_ENV === ‘production’ ? ‘off’ : ‘off’,
‘accessor-pairs’: 2,
‘arrow-spacing’: [2, { ‘before’: true, ‘after’: true }],
‘block-spacing’: [2, ‘always’],
‘brace-style’: [2, ‘1tbs’, { ‘allowSingleLine’: true }],
‘camelcase’: [2, { ‘properties’: ‘always’ }],
‘comma-dangle’: [2, ‘never’],
‘comma-spacing’: [2, { ‘before’: false, ‘after’: true }],
‘comma-style’: [2, ‘last’],
‘constructor-super’: 2,
‘curly’: [2, ‘multi-line’],
‘dot-location’: [2, ‘property’],
‘eol-last’: 2,
‘eqeqeq’: [0, ‘allow-null’],
‘generator-star-spacing’: [2, { ‘before’: true, ‘after’: true }],
‘handle-callback-err’: [2, ‘^(err|error)$’],
‘indent’: [2, 2, { ‘SwitchCase’: 1 }],
‘jsx-quotes’: [2, ‘prefer-single’],
‘key-spacing’: [2, { ‘beforeColon’: false, ‘afterColon’: true }],
‘keyword-spacing’: [2, { ‘before’: true, ‘after’: true }],
‘new-cap’: [2, { ‘newIsCap’: true, ‘capIsNew’: false }],
‘new-parens’: 2,
‘no-array-constructor’: 2,
‘no-caller’: 2,
‘no-class-assign’: 2,
‘no-cond-assign’: 2,
‘no-const-assign’: 2,
‘no-control-regex’: 2,
‘no-delete-var’: 2,
‘no-dupe-args’: 2,
‘no-dupe-class-members’: 2,
‘no-dupe-keys’: 2,
‘no-duplicate-case’: 2,
‘no-empty-character-class’: 2,
‘no-empty-pattern’: 2,
‘no-eval’: 2,
‘no-ex-assign’: 2,
‘no-extend-native’: 2,
‘no-extra-bind’: 2,
‘no-extra-boolean-cast’: 2,
‘no-extra-parens’: [2, ‘functions’],
‘no-fallthrough’: 2,
‘no-floating-decimal’: 2,
‘no-func-assign’: 2,
‘no-implied-eval’: 2,
‘no-inner-declarations’: [2, ‘functions’],
‘no-invalid-regexp’: 2,
‘no-irregular-whitespace’: 2,
‘no-iterator’: 2,
‘no-label-var’: 2,
‘no-labels’: [2, { ‘allowLoop’: false, ‘allowSwitch’: false }],
‘no-lone-blocks’: 2,
‘no-mixed-spaces-and-tabs’: 2,
‘no-multi-spaces’: 2,
‘no-multi-str’: 2,
‘no-multiple-empty-lines’: [2, { ‘max’: 1 }],
‘no-native-reassign’: 2,
‘no-negated-in-lhs’: 2,
‘no-new-object’: 2,
‘no-new-require’: 2,
‘no-new-symbol’: 2,
‘no-new-wrappers’: 2,
‘no-obj-calls’: 2,
‘no-octal’: 2,
‘no-octal-escape’: 2,
‘no-path-concat’: 2,
‘no-proto’: 2,
‘no-redeclare’: 2,
‘no-regex-spaces’: 2,
‘no-return-assign’: [2, ‘except-parens’],
‘no-self-assign’: 2,
‘no-self-compare’: 2,
‘no-sequences’: 2,
‘no-shadow-restricted-names’: 2,
‘no-spaced-func’: 2,
‘no-sparse-arrays’: 2,
‘no-this-before-super’: 2,
‘no-throw-literal’: 2,
‘no-trailing-spaces’: 2,
‘no-undef’: 2,
‘no-undef-init’: 2,
‘no-unexpected-multiline’: 2,
‘no-unmodified-loop-condition’: 2,
‘no-unneeded-ternary’: [2, { ‘defaultAssignment’: false }],
‘no-unreachable’: 2,
‘no-unsafe-finally’: 2,
‘no-unused-vars’: [2, { ‘vars’: ‘all’, ‘args’: ‘none’ }],
‘no-useless-call’: 2,
‘no-useless-computed-key’: 2,
‘no-useless-constructor’: 2,
‘no-useless-escape’: 0,
‘no-whitespace-before-property’: 2,
‘no-with’: 2,
‘one-var’: [2, { ‘initialized’: ‘never’ }],
‘operator-linebreak’: [2, ‘after’, { ‘overrides’: { ‘?’: ‘before’, ‘:’: ‘before’ } }],
‘padded-blocks’: [2, ‘never’],
‘quotes’: [0, ‘single’, { ‘avoidEscape’: true, ‘allowTemplateLiterals’: true }],
‘semi’: [0, ‘never’],
‘semi-spacing’: [0, { ‘before’: false, ‘after’: true }],
‘space-before-blocks’: [2, ‘always’],
‘space-before-function-paren’: [0, ‘never’],
‘space-in-parens’: [2, ‘never’],
‘space-infix-ops’: 2,
‘space-unary-ops’: [2, { ‘words’: true, ‘nonwords’: false }],
‘spaced-comment’: [2, ‘always’, { ‘markers’: [‘global’, ‘globals’, ‘eslint’, ‘eslint-disable’, ‘package’, ‘!’, ‘,’] }],
‘template-curly-spacing’: [2, ‘never’],
‘use-isnan’: 2,
‘valid-typeof’: 2,
‘wrap-iife’: [2, ‘any’],
‘yield-star-spacing’: [2, ‘both’],
‘yoda’: [2, ‘never’],
‘prefer-const’: 2,
// ‘object-curly-spacing’: [2, ‘always’, { objectsInObjects: false }],
‘array-bracket-spacing’: [2, ‘never’],
‘no-tabs’: [0, ‘always’]
},
parserOptions: {
parser: ‘babel-eslint’
},
overrides: [
{
files: [
'**/tests/.{j,t}s?(x)’,
‘/tests/unit//*.spec.{j,t}s?(x)’
],
env: {
jest: true
}
}
]
}
2、在.eslintignore文件中添加以下代码

3、在package.json的script里面添加

执行npm run lint,eslint就可以对代码进行格式化，当然vscode也会在你保存文件的时候校验一次
4、配置husky，规范化提交代码
在eslint,stylelint配置完之后，写代码时候vscode会自动校验格式化代码， 但就怕有人用其他编辑器没有配置插件，将未校验的代码提交到仓库里面，导致所有人的代码都爆红，这时候就需要使用husky在提交代码时候进行校验。
在git提交代码时候，会触发一系列hook钩子函数，而husky就是一个Git hooks工具。lint-staged是一个在git暂存文件上运行linters的工具,为什么要用这个工具呢，因为我们在提交代码的时候，只需要对已经修改过的文件进行校验，不然检查所有文件，比较浪费时间。那我们改怎么配置呢？
在package.json文件里面添加以下代码