⚡️性能(deps): add auto-import
This commit is contained in:
72
.eslintrc-auto-import.json
Normal file
72
.eslintrc-auto-import.json
Normal file
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"globals": {
|
||||
"Component": true,
|
||||
"ComponentPublicInstance": true,
|
||||
"ComputedRef": true,
|
||||
"EffectScope": true,
|
||||
"ExtractDefaultPropTypes": true,
|
||||
"ExtractPropTypes": true,
|
||||
"ExtractPublicPropTypes": true,
|
||||
"InjectionKey": true,
|
||||
"PropType": true,
|
||||
"Ref": true,
|
||||
"VNode": true,
|
||||
"WritableComputedRef": true,
|
||||
"computed": true,
|
||||
"createApp": true,
|
||||
"customRef": true,
|
||||
"defineAsyncComponent": true,
|
||||
"defineComponent": true,
|
||||
"effectScope": true,
|
||||
"getCurrentInstance": true,
|
||||
"getCurrentScope": true,
|
||||
"h": true,
|
||||
"inject": true,
|
||||
"isProxy": true,
|
||||
"isReactive": true,
|
||||
"isReadonly": true,
|
||||
"isRef": true,
|
||||
"markRaw": true,
|
||||
"nextTick": true,
|
||||
"onActivated": true,
|
||||
"onBeforeMount": true,
|
||||
"onBeforeRouteLeave": true,
|
||||
"onBeforeRouteUpdate": true,
|
||||
"onBeforeUnmount": true,
|
||||
"onBeforeUpdate": true,
|
||||
"onDeactivated": true,
|
||||
"onErrorCaptured": true,
|
||||
"onMounted": true,
|
||||
"onRenderTracked": true,
|
||||
"onRenderTriggered": true,
|
||||
"onScopeDispose": true,
|
||||
"onServerPrefetch": true,
|
||||
"onUnmounted": true,
|
||||
"onUpdated": true,
|
||||
"provide": true,
|
||||
"reactive": true,
|
||||
"readonly": true,
|
||||
"ref": true,
|
||||
"resolveComponent": true,
|
||||
"shallowReactive": true,
|
||||
"shallowReadonly": true,
|
||||
"shallowRef": true,
|
||||
"toRaw": true,
|
||||
"toRef": true,
|
||||
"toRefs": true,
|
||||
"toValue": true,
|
||||
"triggerRef": true,
|
||||
"unref": true,
|
||||
"useAttrs": true,
|
||||
"useCssModule": true,
|
||||
"useCssVars": true,
|
||||
"useLink": true,
|
||||
"useRoute": true,
|
||||
"useRouter": true,
|
||||
"useSlots": true,
|
||||
"watch": true,
|
||||
"watchEffect": true,
|
||||
"watchPostEffect": true,
|
||||
"watchSyncEffect": true
|
||||
}
|
||||
}
|
||||
215
.eslintrc.cjs
215
.eslintrc.cjs
@@ -1,107 +1,108 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
node: true
|
||||
},
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:vue/vue3-essential',
|
||||
'plugin:prettier/recommended'
|
||||
],
|
||||
overrides: [
|
||||
{
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
files: ['.eslintrc.{js,cjs}'],
|
||||
parserOptions: {
|
||||
sourceType: 'script'
|
||||
}
|
||||
}
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
parser: '@typescript-eslint/parser',
|
||||
sourceType: 'module'
|
||||
},
|
||||
plugins: ['@typescript-eslint', 'vue'],
|
||||
rules: {
|
||||
indent: ['off', 2],
|
||||
// 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 debugger
|
||||
// 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 console
|
||||
// 'no-bitwise': 'off', // 禁用按位运算符
|
||||
// 'no-tabs': 'off', // 禁用 tab
|
||||
// 'array-element-newline': ['error', 'consistent'], // 强制数组元素间出现换行
|
||||
// indent: [
|
||||
// 'error',
|
||||
// 2,
|
||||
// { MemberExpression: 0, SwitchCase: 1, ignoredNodes: ['TemplateLiteral'] },
|
||||
// ], // 强制使用一致的缩进
|
||||
// quotes: ['error', 'single'], // 强制使用一致的反勾号、双引号或单引号
|
||||
// 'comma-dangle': ['error', 'always-multiline'], // 要求或禁止末尾逗号
|
||||
// 'object-curly-spacing': ['error', 'always'], // 强制在大括号中使用一致的空格
|
||||
// 'max-len': ['error', 120], // 强制一行的最大长度
|
||||
// 'no-new': 'off', // 禁止使用 new 以避免产生副作用
|
||||
// 'linebreak-style': 'off', // 强制使用一致的换行风格
|
||||
// 'import/extensions': 'off', // 确保在导入路径中统一使用文件扩展名
|
||||
// 'eol-last': 'off', // 要求或禁止文件末尾存在空行
|
||||
// 'no-shadow': 'off', // 禁止变量声明与外层作用域的变量同名
|
||||
// 'no-unused-vars': 'warn', // 禁止出现未使用过的变量
|
||||
// 'import/no-cycle': 'off', // 禁止一个模块导入一个有依赖路径的模块回到自己身上
|
||||
// 'arrow-parens': 'off', // 要求箭头函数的参数使用圆括号
|
||||
// semi: ['error', 'never'], // 要求或禁止使用分号代替 ASI
|
||||
// eqeqeq: 'off', // 要求使用 === 和 !==
|
||||
// 'no-param-reassign': 'off', // 禁止对 function 的参数进行重新赋值
|
||||
// 'import/prefer-default-export': 'off', // 如果模块只输入一个名字，则倾向于默认输出
|
||||
// 'no-use-before-define': 'off', // 禁止在变量定义之前使用它们，则倾向于默认输出
|
||||
// 'no-continue': 'off', // 禁用 continue 语句
|
||||
// 'prefer-destructuring': 'off', // 优先使用数组和对象解构
|
||||
// 'no-plusplus': 'off', // 禁用一元操作符 ++ 和 --
|
||||
// 'prefer-const': 'warn', // 要求使用 const 声明那些声明后不再被修改的变量
|
||||
// 'global-require': 'off', // 要求 require() 出现在顶层模块作用域中
|
||||
// 'no-prototype-builtins': 'off', // 禁止直接调用 Object.prototypes 的内置属性
|
||||
// 'consistent-return': 'off', // 要求 return 语句要么总是指定返回的值，要么不指定
|
||||
// 'one-var-declaration-per-line': 'off', // 要求或禁止在变量声明周围换行
|
||||
// 'one-var': 'off', // 强制函数中的变量要么一起声明要么分开声明
|
||||
// 'import/named': 'off', // 确保命名导入与远程文件中的命名导出相对应
|
||||
// 'object-curly-newline': 'off', // 强制大括号内换行符的一致性
|
||||
// 'default-case': 'off', // 要求 switch 语句中有 default 分支
|
||||
// 'no-trailing-spaces': 'off', // 禁用行尾空格
|
||||
// 'func-names': 'off', // 要求或禁止使用命名的 function 表达式
|
||||
// radix: 'off', // 强制在 parseInt() 使用基数参数
|
||||
// 'no-unused-expressions': 'off', // 禁止出现未使用过的表达式
|
||||
// 'no-underscore-dangle': 'off', // 禁止标识符中有悬空下划线
|
||||
// 'no-nested-ternary': 'off', // 禁用嵌套的三元表达式
|
||||
// 'no-restricted-syntax': 'off', // 禁用特定的语法
|
||||
// 'no-await-in-loop': 'off', // 禁止在循环中出现 await
|
||||
// 'import/no-extraneous-dependencies': 'off', // 禁止使用外部包
|
||||
// 'import/no-unresolved': 'off', // 确保导入指向一个可以解析的文件/模块
|
||||
// 'template-curly-spacing': ['error', 'always'], // 要求或禁止模板字符串中的嵌入表达式周围空格的使用
|
||||
// '@typescript-eslint/no-var-requires': 'off', // 除import语句外，禁止使用require语句
|
||||
// '@typescript-eslint/no-empty-function': 'off', // 不允许空函数
|
||||
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
|
||||
// 'guard-for-in': 'off', // 要求 for-in 循环中有一个 if 语句
|
||||
// 'class-methods-use-this': 'off', // 强制类方法使用 this
|
||||
// 'vue/html-indent': ['error', 2], // 在<template>中强制一致缩进
|
||||
// 'vue/html-self-closing': 'off', // 执行自闭合的风格
|
||||
// 'vue/singleline-html-element-content-newline': 'off', // 要求单行元素的内容前后有一个换行符
|
||||
'prettier/prettier': [
|
||||
'error',
|
||||
{
|
||||
useTabs: true,
|
||||
tabWidth: 4
|
||||
}
|
||||
],
|
||||
'@typescript-eslint/ban-types': [
|
||||
'error',
|
||||
{
|
||||
extendDefaults: true,
|
||||
types: {
|
||||
'{}': false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
node: true
|
||||
},
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:vue/vue3-essential',
|
||||
'plugin:prettier/recommended',
|
||||
'vue-global-api'
|
||||
],
|
||||
overrides: [
|
||||
{
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
files: ['.eslintrc.{js,cjs}'],
|
||||
parserOptions: {
|
||||
sourceType: 'script'
|
||||
}
|
||||
}
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
parser: '@typescript-eslint/parser',
|
||||
sourceType: 'module'
|
||||
},
|
||||
plugins: ['@typescript-eslint', 'vue'],
|
||||
rules: {
|
||||
indent: ['off', 2],
|
||||
// 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 debugger
|
||||
// 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', // 禁用 console
|
||||
// 'no-bitwise': 'off', // 禁用按位运算符
|
||||
// 'no-tabs': 'off', // 禁用 tab
|
||||
// 'array-element-newline': ['error', 'consistent'], // 强制数组元素间出现换行
|
||||
// indent: [
|
||||
// 'error',
|
||||
// 2,
|
||||
// { MemberExpression: 0, SwitchCase: 1, ignoredNodes: ['TemplateLiteral'] },
|
||||
// ], // 强制使用一致的缩进
|
||||
// quotes: ['error', 'single'], // 强制使用一致的反勾号、双引号或单引号
|
||||
// 'comma-dangle': ['error', 'always-multiline'], // 要求或禁止末尾逗号
|
||||
// 'object-curly-spacing': ['error', 'always'], // 强制在大括号中使用一致的空格
|
||||
// 'max-len': ['error', 120], // 强制一行的最大长度
|
||||
// 'no-new': 'off', // 禁止使用 new 以避免产生副作用
|
||||
// 'linebreak-style': 'off', // 强制使用一致的换行风格
|
||||
// 'import/extensions': 'off', // 确保在导入路径中统一使用文件扩展名
|
||||
// 'eol-last': 'off', // 要求或禁止文件末尾存在空行
|
||||
// 'no-shadow': 'off', // 禁止变量声明与外层作用域的变量同名
|
||||
// 'no-unused-vars': 'warn', // 禁止出现未使用过的变量
|
||||
// 'import/no-cycle': 'off', // 禁止一个模块导入一个有依赖路径的模块回到自己身上
|
||||
// 'arrow-parens': 'off', // 要求箭头函数的参数使用圆括号
|
||||
// semi: ['error', 'never'], // 要求或禁止使用分号代替 ASI
|
||||
// eqeqeq: 'off', // 要求使用 === 和 !==
|
||||
// 'no-param-reassign': 'off', // 禁止对 function 的参数进行重新赋值
|
||||
// 'import/prefer-default-export': 'off', // 如果模块只输入一个名字，则倾向于默认输出
|
||||
// 'no-use-before-define': 'off', // 禁止在变量定义之前使用它们，则倾向于默认输出
|
||||
// 'no-continue': 'off', // 禁用 continue 语句
|
||||
// 'prefer-destructuring': 'off', // 优先使用数组和对象解构
|
||||
// 'no-plusplus': 'off', // 禁用一元操作符 ++ 和 --
|
||||
// 'prefer-const': 'warn', // 要求使用 const 声明那些声明后不再被修改的变量
|
||||
// 'global-require': 'off', // 要求 require() 出现在顶层模块作用域中
|
||||
// 'no-prototype-builtins': 'off', // 禁止直接调用 Object.prototypes 的内置属性
|
||||
// 'consistent-return': 'off', // 要求 return 语句要么总是指定返回的值，要么不指定
|
||||
// 'one-var-declaration-per-line': 'off', // 要求或禁止在变量声明周围换行
|
||||
// 'one-var': 'off', // 强制函数中的变量要么一起声明要么分开声明
|
||||
// 'import/named': 'off', // 确保命名导入与远程文件中的命名导出相对应
|
||||
// 'object-curly-newline': 'off', // 强制大括号内换行符的一致性
|
||||
// 'default-case': 'off', // 要求 switch 语句中有 default 分支
|
||||
// 'no-trailing-spaces': 'off', // 禁用行尾空格
|
||||
// 'func-names': 'off', // 要求或禁止使用命名的 function 表达式
|
||||
// radix: 'off', // 强制在 parseInt() 使用基数参数
|
||||
// 'no-unused-expressions': 'off', // 禁止出现未使用过的表达式
|
||||
// 'no-underscore-dangle': 'off', // 禁止标识符中有悬空下划线
|
||||
// 'no-nested-ternary': 'off', // 禁用嵌套的三元表达式
|
||||
// 'no-restricted-syntax': 'off', // 禁用特定的语法
|
||||
// 'no-await-in-loop': 'off', // 禁止在循环中出现 await
|
||||
// 'import/no-extraneous-dependencies': 'off', // 禁止使用外部包
|
||||
// 'import/no-unresolved': 'off', // 确保导入指向一个可以解析的文件/模块
|
||||
// 'template-curly-spacing': ['error', 'always'], // 要求或禁止模板字符串中的嵌入表达式周围空格的使用
|
||||
// '@typescript-eslint/no-var-requires': 'off', // 除import语句外，禁止使用require语句
|
||||
// '@typescript-eslint/no-empty-function': 'off', // 不允许空函数
|
||||
'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
|
||||
// 'guard-for-in': 'off', // 要求 for-in 循环中有一个 if 语句
|
||||
// 'class-methods-use-this': 'off', // 强制类方法使用 this
|
||||
// 'vue/html-indent': ['error', 2], // 在<template>中强制一致缩进
|
||||
// 'vue/html-self-closing': 'off', // 执行自闭合的风格
|
||||
// 'vue/singleline-html-element-content-newline': 'off', // 要求单行元素的内容前后有一个换行符
|
||||
'prettier/prettier': [
|
||||
'error',
|
||||
{
|
||||
useTabs: true,
|
||||
tabWidth: 4
|
||||
}
|
||||
],
|
||||
'@typescript-eslint/ban-types': [
|
||||
'error',
|
||||
{
|
||||
extendDefaults: true,
|
||||
types: {
|
||||
'{}': false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import request from '@/utils/axios/request'
|
||||
|
||||
// 演示代码
|
||||
export const postLogin = (params: any) => {
|
||||
return request.post('/user/login', params);
|
||||
}
|
||||
import request from '@/utils/axios/request'
|
||||
|
||||
// 演示代码
|
||||
export const postLogin = (params: object) => {
|
||||
return request.post('/user/login', params)
|
||||
}
|
||||
|
||||
@@ -1,66 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
import { ECharts, EChartsOption, init } from 'echarts'
|
||||
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
|
||||
|
||||
// 定义props
|
||||
interface Props {
|
||||
width?: string
|
||||
height?: string
|
||||
option: EChartsOption
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
option: () => ({})
|
||||
})
|
||||
|
||||
const myChartsRef = ref<HTMLDivElement>()
|
||||
let myChart: ECharts
|
||||
// eslint-disable-next-line no-undef
|
||||
let timer: string | number | NodeJS.Timeout | undefined
|
||||
|
||||
// 初始化echarts
|
||||
const initChart = (): void => {
|
||||
if (myChart !== undefined) {
|
||||
myChart.dispose()
|
||||
}
|
||||
myChart = init(myChartsRef.value as HTMLDivElement)
|
||||
// 拿到option配置项，渲染echarts
|
||||
myChart?.setOption(props.option, true)
|
||||
}
|
||||
|
||||
// 重新渲染echarts
|
||||
const resizeChart = (): void => {
|
||||
timer = setTimeout(() => {
|
||||
if (myChart) {
|
||||
myChart.resize()
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
window.addEventListener('resize', resizeChart)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart)
|
||||
clearTimeout(timer)
|
||||
timer = 0
|
||||
})
|
||||
|
||||
watch(
|
||||
props.option,
|
||||
() => {
|
||||
initChart()
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="myChartsRef" :style="{ height: height, width: width }" :option="option" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ECharts, EChartsOption, init } from 'echarts'
|
||||
|
||||
// 定义props
|
||||
interface Props {
|
||||
width?: string
|
||||
height?: string
|
||||
option: EChartsOption
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
option: () => ({})
|
||||
})
|
||||
|
||||
const myChartsRef = ref<HTMLDivElement>()
|
||||
let myChart: ECharts
|
||||
// eslint-disable-next-line no-undef
|
||||
let timer: string | number | NodeJS.Timeout | undefined
|
||||
|
||||
// 初始化echarts
|
||||
const initChart = (): void => {
|
||||
if (myChart !== undefined) {
|
||||
myChart.dispose()
|
||||
}
|
||||
myChart = init(myChartsRef.value as HTMLDivElement)
|
||||
// 拿到option配置项，渲染echarts
|
||||
myChart?.setOption(props.option, true)
|
||||
}
|
||||
|
||||
// 重新渲染echarts
|
||||
const resizeChart = (): void => {
|
||||
timer = setTimeout(() => {
|
||||
if (myChart) {
|
||||
myChart.resize()
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initChart()
|
||||
window.addEventListener('resize', resizeChart)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('resize', resizeChart)
|
||||
clearTimeout(timer)
|
||||
timer = 0
|
||||
})
|
||||
|
||||
watch(
|
||||
props.option,
|
||||
() => {
|
||||
initChart()
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="myChartsRef" :style="{ height: height, width: width }" :option="option" />
|
||||
</template>
|
||||
|
||||
@@ -1,33 +1,34 @@
|
||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
|
||||
// 引入 nprogress 相关方法
|
||||
import { close, start } from '@/utils/nprogress/nprogress'
|
||||
import login from './modules/login'
|
||||
const routes: Array<RouteRecordRaw> = [...login]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
// 路由前置后卫
|
||||
router.beforeEach(() => {
|
||||
// 开启进度条
|
||||
start()
|
||||
})
|
||||
// 路由后置后卫
|
||||
router.afterEach(() => {
|
||||
// 关闭进度条
|
||||
close()
|
||||
})
|
||||
|
||||
/* 初始化路由表 */
|
||||
export function resetRouter() {
|
||||
router.getRoutes().forEach((route) => {
|
||||
const { name } = route
|
||||
if (name) {
|
||||
router.hasRoute(name) && router.removeRoute(name)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default router
|
||||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
|
||||
// 引入 nprogress 相关方法
|
||||
import { close, start } from '@/utils/nprogress/nprogress'
|
||||
import login from './modules/login'
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [...login]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes
|
||||
})
|
||||
|
||||
// 路由前置后卫
|
||||
router.beforeEach(() => {
|
||||
// 开启进度条
|
||||
start()
|
||||
})
|
||||
// 路由后置后卫
|
||||
router.afterEach(() => {
|
||||
// 关闭进度条
|
||||
close()
|
||||
})
|
||||
|
||||
/* 初始化路由表 */
|
||||
export function resetRouter() {
|
||||
router.getRoutes().forEach((route) => {
|
||||
const { name } = route
|
||||
if (name) {
|
||||
router.hasRoute(name) && router.removeRoute(name)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default router
|
||||
|
||||
100
tsconfig.json
100
tsconfig.json
@@ -1,49 +1,51 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"typeRoots": [
|
||||
"node_modules/@types",
|
||||
"src/types",
|
||||
],
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2020",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@": [
|
||||
"src"
|
||||
],
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"allowJs": true,
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue"
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
"compilerOptions": {
|
||||
"noImplicitAny": false,
|
||||
"typeRoots": [
|
||||
"node_modules/@types",
|
||||
"src/types",
|
||||
],
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2020",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@": [
|
||||
"src"
|
||||
],
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"allowJs": true,
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true
|
||||
},
|
||||
"include": [
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"auto-import.d.ts"
|
||||
],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.node.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
337
vite.config.mts
337
vite.config.mts
@@ -1,167 +1,170 @@
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import * as path from 'path'
|
||||
import legacy from '@vitejs/plugin-legacy'
|
||||
|
||||
// 自动导入vue中hook reactive ref等
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
//自动导入ui-组件 比如说ant-design-vue element-plus等
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
//ant-design-vue
|
||||
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
// svg plugin
|
||||
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
|
||||
|
||||
import autoprefixer from 'autoprefixer'
|
||||
|
||||
|
||||
import viteCompression from 'vite-plugin-compression'
|
||||
import viteImagemin from 'vite-plugin-imagemin'
|
||||
|
||||
|
||||
export default defineConfig(({ mode, command }) => {
|
||||
const env = loadEnv(mode, process.cwd())
|
||||
return {
|
||||
resolve: {
|
||||
//设置别名
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src')
|
||||
}
|
||||
},
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
autoprefixer({
|
||||
overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
|
||||
})
|
||||
]
|
||||
}
|
||||
},
|
||||
esbuild: {
|
||||
// configure this value when the browser version of the development environment is lower
|
||||
// minimum support es2015
|
||||
// https://esbuild.github.io/api/#target
|
||||
target: 'es2015',
|
||||
include: /\.(ts|jsx|tsx)$/
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
viteImagemin({
|
||||
gifsicle: { // gif图片压缩
|
||||
optimizationLevel: 3, // 选择1到3之间的优化级别
|
||||
interlaced: false // 隔行扫描gif进行渐进式渲染
|
||||
// colors: 2 // 将每个输出GIF中不同颜色的数量减少到num或更少。数字必须介于2和256之间。
|
||||
},
|
||||
optipng: { // png
|
||||
optimizationLevel: 7 // 选择0到7之间的优化级别
|
||||
},
|
||||
mozjpeg: {// jpeg
|
||||
quality: 20 // 压缩质量，范围从0(最差)到100(最佳)。
|
||||
},
|
||||
pngquant: {// png
|
||||
quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。
|
||||
speed: 4 // 压缩速度，1(强力)到11(最快)
|
||||
},
|
||||
svgo: { // svg压缩
|
||||
plugins: [
|
||||
{
|
||||
name: 'removeViewBox'
|
||||
},
|
||||
{
|
||||
name: 'removeEmptyAttrs',
|
||||
active: false
|
||||
}
|
||||
]
|
||||
}
|
||||
}),
|
||||
viteCompression({
|
||||
verbose: true, // 是否在控制台中输出压缩结果
|
||||
disable: false,
|
||||
threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
|
||||
algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
|
||||
ext: '.gz',
|
||||
deleteOriginFile: true // 源文件压缩后是否删除
|
||||
}),
|
||||
// 修改 svg 相关配置
|
||||
createSvgIconsPlugin({
|
||||
// 指定需要缓存的图标文件夹
|
||||
iconDirs: [path.resolve(__dirname, './src/assets/svg')]
|
||||
}),
|
||||
legacy({
|
||||
renderLegacyChunks: true,
|
||||
modernPolyfills: true,
|
||||
targets: ['chrome 52'], // 需要兼容的目标列表
|
||||
additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
|
||||
}),
|
||||
AutoImport({
|
||||
//安装两行后你会发现在组件中不用再导入ref，reactive等
|
||||
imports: ['vue', 'vue-router'],
|
||||
dts: 'auto-import.d.ts',
|
||||
//ant-design-vue
|
||||
resolvers: [AntDesignVueResolver()]
|
||||
}),
|
||||
Components({
|
||||
//ant-design-vue
|
||||
resolvers: [AntDesignVueResolver({ importStyle: true, resolveIcons: true })]
|
||||
})
|
||||
],
|
||||
optimizeDeps: {
|
||||
include: ['core-js']
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
//target是代理的目标路径
|
||||
target: env.VITE_API_BASE_URL,
|
||||
changeOrigin: true, //必须要开启跨域
|
||||
rewrite: (path) => path.replace(/\/api/, '') // 路径重写
|
||||
}
|
||||
}
|
||||
},
|
||||
build: {
|
||||
// target: ['es2015'], // 设置最终构建的浏览器兼容目标
|
||||
moduleResolution: 'node', // 决定如何处理模块。
|
||||
outDir: 'dist', // 指定输出路径
|
||||
assetsDir: 'assets', // 指定生成静态文件目录
|
||||
assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
|
||||
cssCodeSplit: true, // 启用 CSS 代码拆分
|
||||
// cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
|
||||
sourcemap: false, // 构建后是否生成 source map 文件
|
||||
|
||||
// lib: {}, // 构建为库
|
||||
manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
|
||||
ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
|
||||
ssr: undefined, // 生成面向 SSR 的构建
|
||||
minify: 'terser', // 指定使用哪种混淆器
|
||||
// 传递给 Terser 的更多 minify 选项
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true,
|
||||
drop_debugger: true
|
||||
}
|
||||
},
|
||||
write: true, // 启用将构建后的文件写入磁盘
|
||||
emptyOutDir: true, // 构建时清空该目录
|
||||
brotliSize: true, // 启用 brotli 压缩大小报告
|
||||
chunkSizeWarningLimit: 2000, // chunk 大小警告的限制
|
||||
watch: null, // 设置为 {} 则会启用 rollup 的监听器
|
||||
rollupOptions: { // 自定义底层的 Rollup 打包配置
|
||||
output: {
|
||||
chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
|
||||
entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
|
||||
assetFileNames: '[ext]/[name]-[hash].[ext]' // 资源文件像 字体，图片等
|
||||
}
|
||||
}
|
||||
},
|
||||
output: {
|
||||
// 最小化拆分包
|
||||
manualChunks(id) {
|
||||
if (id.includes('node_modules')) {
|
||||
return id.toString().split('node_modules/')[1].split('/')[0].toString()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import * as path from 'path'
|
||||
import legacy from '@vitejs/plugin-legacy'
|
||||
|
||||
// 自动导入vue中hook reactive ref等
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
//自动导入ui-组件 比如说ant-design-vue element-plus等
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
//ant-design-vue
|
||||
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
// svg plugin
|
||||
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
|
||||
|
||||
import autoprefixer from 'autoprefixer'
|
||||
|
||||
import viteCompression from 'vite-plugin-compression'
|
||||
import viteImagemin from 'vite-plugin-imagemin'
|
||||
|
||||
export default defineConfig(({ mode, command }) => {
|
||||
const env = loadEnv(mode, process.cwd())
|
||||
return {
|
||||
resolve: {
|
||||
//设置别名
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src')
|
||||
}
|
||||
},
|
||||
css: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
autoprefixer({
|
||||
overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
|
||||
})
|
||||
]
|
||||
}
|
||||
},
|
||||
esbuild: {
|
||||
// configure this value when the browser version of the development environment is lower
|
||||
// minimum support es2015
|
||||
// https://esbuild.github.io/api/#target
|
||||
target: 'es2015',
|
||||
include: /\.(ts|jsx|tsx)$/
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
viteImagemin({
|
||||
gifsicle: { // gif图片压缩
|
||||
optimizationLevel: 3, // 选择1到3之间的优化级别
|
||||
interlaced: false // 隔行扫描gif进行渐进式渲染
|
||||
// colors: 2 // 将每个输出GIF中不同颜色的数量减少到num或更少。数字必须介于2和256之间。
|
||||
},
|
||||
optipng: { // png
|
||||
optimizationLevel: 7 // 选择0到7之间的优化级别
|
||||
},
|
||||
mozjpeg: {// jpeg
|
||||
quality: 20 // 压缩质量，范围从0(最差)到100(最佳)。
|
||||
},
|
||||
pngquant: {// png
|
||||
quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。
|
||||
speed: 4 // 压缩速度，1(强力)到11(最快)
|
||||
},
|
||||
svgo: { // svg压缩
|
||||
plugins: [
|
||||
{
|
||||
name: 'removeViewBox'
|
||||
},
|
||||
{
|
||||
name: 'removeEmptyAttrs',
|
||||
active: false
|
||||
}
|
||||
]
|
||||
}
|
||||
}),
|
||||
viteCompression({
|
||||
verbose: true, // 是否在控制台中输出压缩结果
|
||||
disable: false,
|
||||
threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
|
||||
algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
|
||||
ext: '.gz',
|
||||
deleteOriginFile: true // 源文件压缩后是否删除
|
||||
}),
|
||||
// 修改 svg 相关配置
|
||||
createSvgIconsPlugin({
|
||||
// 指定需要缓存的图标文件夹
|
||||
iconDirs: [path.resolve(__dirname, './src/assets/svg')]
|
||||
}),
|
||||
legacy({
|
||||
renderLegacyChunks: true,
|
||||
modernPolyfills: true,
|
||||
targets: ['chrome 52'], // 需要兼容的目标列表
|
||||
additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
|
||||
}),
|
||||
AutoImport({
|
||||
//安装两行后你会发现在组件中不用再导入ref，reactive等
|
||||
imports: ['vue', 'vue-router'],
|
||||
dts: 'auto-import.d.ts',
|
||||
//ant-design-vue
|
||||
resolvers: [AntDesignVueResolver()],
|
||||
eslintrc: {
|
||||
enabled: false // 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗
|
||||
|
||||
}
|
||||
}),
|
||||
Components({
|
||||
// 指定自动导入的组件位置，默认是 src/components
|
||||
dirs: ['src/components'],
|
||||
//ant-design-vue
|
||||
resolvers: [AntDesignVueResolver({ importStyle: true, resolveIcons: true })]
|
||||
})
|
||||
],
|
||||
optimizeDeps: {
|
||||
include: ['core-js']
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
//target是代理的目标路径
|
||||
target: env.VITE_API_BASE_URL,
|
||||
changeOrigin: true, //必须要开启跨域
|
||||
rewrite: (path) => path.replace(/\/api/, '') // 路径重写
|
||||
}
|
||||
}
|
||||
},
|
||||
build: {
|
||||
// target: ['es2015'], // 设置最终构建的浏览器兼容目标
|
||||
moduleResolution: 'node', // 决定如何处理模块。
|
||||
outDir: 'dist', // 指定输出路径
|
||||
assetsDir: 'assets', // 指定生成静态文件目录
|
||||
assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
|
||||
cssCodeSplit: true, // 启用 CSS 代码拆分
|
||||
// cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
|
||||
sourcemap: false, // 构建后是否生成 source map 文件
|
||||
|
||||
// lib: {}, // 构建为库
|
||||
manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
|
||||
ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
|
||||
ssr: undefined, // 生成面向 SSR 的构建
|
||||
minify: 'terser', // 指定使用哪种混淆器
|
||||
// 传递给 Terser 的更多 minify 选项
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true,
|
||||
drop_debugger: true
|
||||
}
|
||||
},
|
||||
write: true, // 启用将构建后的文件写入磁盘
|
||||
emptyOutDir: true, // 构建时清空该目录
|
||||
brotliSize: true, // 启用 brotli 压缩大小报告
|
||||
chunkSizeWarningLimit: 2000, // chunk 大小警告的限制
|
||||
watch: null, // 设置为 {} 则会启用 rollup 的监听器
|
||||
rollupOptions: { // 自定义底层的 Rollup 打包配置
|
||||
output: {
|
||||
chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
|
||||
entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
|
||||
assetFileNames: '[ext]/[name]-[hash].[ext]' // 资源文件像 字体，图片等
|
||||
}
|
||||
}
|
||||
},
|
||||
output: {
|
||||
// 最小化拆分包
|
||||
manualChunks(id) {
|
||||
if (id.includes('node_modules')) {
|
||||
return id.toString().split('node_modules/')[1].split('/')[0].toString()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user