企业微信截图_16928408254070.png
1, .husky文件
image.png
由于代码校验工具需要每次手动使用命令执行，才会格式化项目代码，这样很容易让人忘记执行就把代码提交了。
husky的作用就是在代码提交之前触发git hook(git在客户端的钩子)，然后执行pnpm run format来自动的格式化我们的代码。
-
eslint文件
image.png
eslint 它的目标是提供一个插件化的JavaScript代码检测工具。虽然项目里使用了TypeScript，但TypeScript也是JavaScript的超集，所以也是可以使用eslint 进行检查的。eslintrc.js里面的配置很多就不细细解读了
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
jest: true,
},
/* 指定如何解析语法 */
parser: 'vue-eslint-parser',
/** 优先级低于 parse 的语法解析配置 */
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true,
},
},
/* 继承已有的规则 */
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
plugins: ['vue', '@typescript-eslint'],
/*
* "off" 或 0 ==> 关闭规则
* "warn" 或 1 ==> 打开的规则作为警告（不影响代码执行）
* "error" 或 2 ==> 规则作为一个错误（代码不能执行，界面报错）
*/
rules: {
// eslint（https://eslint.bootcss.com/docs/rules/）
'no-var': 'error', // 要求使用 let 或 const 而不是 var
'no-multiple-empty-lines': ['warn', { max: 1 }], // 不允许多个空行
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-unexpected-multiline': 'error', // 禁止空余的多行
'no-useless-escape': 'off', // 禁止不必要的转义字符
// typeScript (https://typescript-eslint.io/rules)
'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
'@typescript-eslint/semi': 'off',
// eslint-plugin-vue (https://eslint.vuejs.org/rules/)
'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用
'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
},
};
.eslintignore 文件是一个忽略文件，主要是为了忽略对于哪些文件不需要进行代码校验。比如node_modules文件、打包后的dist文件等；
# Eslint 会忽略的文件
.DS_Store
node_modules
dist
dist-ssr
*.local
.npmrc
3.prettier.config.js、prettierignore文件
image.png
有了eslint，为什么还要有prettier? eslint针对的是javascript，他是一个检测工具，包含js语法以及少部分格式问题，在eslint看来，语法对了就能保证代码正常运行，格式问题属于其次;
而prettier属于格式化工具，它看不惯格式不统一，所以它就把eslint没干好的事接着干，另外，prettier支持
包含js在内的多种语言。
总结起来，eslint和prettier这俩兄弟一个保证js代码质量，一个保证代码美观。
prettier.config.js内主要配置如下：
/** 配置项文档：https://prettier.io/docs/en/configuration.html */
module.exports = {
/** 每一行的宽度 */
printWidth: 120,
/** Tab 键的空格数 */
tabWidth: 2,
/** 在对象中的括号之间是否用空格来间隔 */
bracketSpacing: true,
/** 箭头函数的参数无论有几个，都要括号包裹 */
arrowParens: "always",
/** 换行符的使用 */
endOfLine: "auto",
/** 是否采用单引号 */
singleQuote: false,
/** 对象或者数组的最后一个元素后面不要加逗号 */
trailingComma: "none",
/** 是否加分号 */
semi: false,
/** 是否使用 Tab 格式化 */
useTabs: false
}
prettierignore和eslintignore 类似，忽略以下不需要格式化的文件
# Prettier 会忽略的文件
.DS_Store
node_modules
dist
dist-ssr
*.local
.npmrc
4.环境变量的配置
image.png
项目开发过程中，至少会经历开发环境、测试环境和生产环境(即正式环境)三个阶段。不同阶段请求的状态(如接口地址等)不尽相同，若手动切换接口地址是相当繁琐且易出错的。于是环境变量配置的需求就应运而生，我们只需做简单的配置，把环境状态切换的工作交给代码。
开发环境 (development)
顾名思义，开发使用的环境，每位开发人员在自己的dev分支上干活，开发到一定程度，同事会合并代码，进行联调。
测试环境 (stagting)
测试同事干活的环境啦，一般会由测试同事自己来部署，然后在此环境进行测试
生产环境(production)
生产环境是指正式提供对外服务的，一般会关掉错误报告，打开错误日志。(正式提供给客户使用的环境。)
注意:一般情况下，一个环境对应一台服务,也有的公司开发与测试环境是一台服务!!!
.env.development配置如下
# 自定义的环境变量（命名必须以 VITE_ 开头）
## 后端接口公共路径（如果解决跨域问题采用反向代理就只需写公共路径）
VITE_BASE_API = '/api/v1'
## 路由模式 hash 或 html5
VITE_ROUTER_HISTORY = 'hash'
## 开发环境地址前缀（一般 '/'，'./' 都可以）
VITE_PUBLIC_PATH = '/'
.env.production
# 自定义的环境变量（命名必须以 VITE_ 开头）
## 后端接口公共路径（如果解决跨域问题采用 CORS 就需要写全路径）
# VITE_BASE_API = 'https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1'
VITE_BASE_API = 'https://www.fastmock.site/mock/761e2dda2b8890ab86c928a74e8f6538/api/v1'
## 路由模式 hash 或 html5
VITE_ROUTER_HISTORY = 'hash'
## 打包路径（就是网站前缀，例如部署到 https://un-pany.github.io/v3-admin-vite/ 域名下，就需要填写 /v3-admin-vite/）
VITE_PUBLIC_PATH = '/v3-admin-vite/'
以获取VITE_BASE_API 为例，我们在service.ts内动态获取baseURL
image.png
配置运行命令package.json
"scripts":{
"dev": "vite --open",
"build:test":"vue-tsc && vite build --mode stagting",
"build:pro": "vue-tsc && vite build --mode production",
"preview":"vite preview""
}
通过import.meta.env获取环境变量
运行pnpm run dev 和 pnpm run build:pro
import.meta.env.VITE_BASE_API 分别为 '/api/v1' 和 'https://www.fastmock.site/mock/761e2dda2b8890ab86c928a74e8f6538/api/v1'，以达到环境区分目的。
网友评论