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