refactor(app): 优化代码和性能
- 在 puzzleComponent 中添加 watch 监听 loading 状态,以重置验证状态 - 修改 personal-Info 页面中路由跳转方式 - 在 nuxt.config.js 中添加 imagemin 插件,优化图片压缩 - 更新 package.json,添加 vite-plugin-imagemin 依赖
This commit is contained in:
parent
3b60502ae3
commit
9402c8b719
@ -1,7 +1,7 @@
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
|
||||
//i18n
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const {t} =useI18n()
|
||||
@ -40,7 +40,15 @@
|
||||
maxMoveX.value = img.width - blockSize
|
||||
loaded.value = true
|
||||
}
|
||||
|
||||
watch(()=>{
|
||||
return props.loading
|
||||
},(newVal)=>{
|
||||
if(!newVal){
|
||||
verifyStatus.show = false
|
||||
verifyStatus.message = ''
|
||||
moveX.value = 0
|
||||
}
|
||||
})
|
||||
const onImageError = () => {
|
||||
console.error('Image failed to load')
|
||||
maxMoveX.value = 270
|
||||
@ -84,11 +92,7 @@
|
||||
verifyStatus.type = success ? 'success' : 'error'
|
||||
verifyStatus.message = success ? t('components.form.verifySuccess') : t('components.form.verifyFailed')
|
||||
isVerifying.value = false
|
||||
setTimeout(() => {
|
||||
verifyStatus.show = false
|
||||
verifyStatus.message = ''
|
||||
moveX.value = 0
|
||||
}, 1500)
|
||||
|
||||
}
|
||||
|
||||
// 事件监听
|
||||
|
@ -114,7 +114,7 @@ const initData = async () => {
|
||||
if (number.value==2){
|
||||
await getData()
|
||||
if (qrData.value.payStatus===4){
|
||||
router.replace('/collectCode/payment')
|
||||
router.push('/collectCode/payment')
|
||||
}
|
||||
}
|
||||
if(!formData.value.countryCode){
|
||||
|
@ -1,5 +1,6 @@
|
||||
import dotenv from 'dotenv'
|
||||
import process from 'node:process'
|
||||
import imagemin from 'vite-plugin-imagemin'
|
||||
import { currentLocales } from './i18n/i18n'
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
@ -29,13 +30,8 @@ export default defineNuxtConfig({
|
||||
modules: [
|
||||
'@vant/nuxt',
|
||||
'@unocss/nuxt',
|
||||
'@nuxtjs/i18n',
|
||||
'@nuxtjs/i18n'
|
||||
],
|
||||
image: {
|
||||
provider: 'ipx',
|
||||
format: ['webp'],
|
||||
quality: 80,
|
||||
},
|
||||
runtimeConfig: {
|
||||
// 私有配置,只有在服务端可用
|
||||
apiSecret: process.env.NUXT_API_SECRET,
|
||||
@ -115,6 +111,13 @@ export default defineNuxtConfig({
|
||||
vite: {
|
||||
build: {
|
||||
target: 'esnext',
|
||||
minify: 'terser',
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true, // 移除 console
|
||||
drop_debugger: true, // 移除 debugger
|
||||
}
|
||||
}
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
@ -123,6 +126,35 @@ export default defineNuxtConfig({
|
||||
'is-https',
|
||||
],
|
||||
},
|
||||
plugins: [
|
||||
imagemin({
|
||||
gifsicle: {
|
||||
optimizationLevel: 7,
|
||||
interlaced: false
|
||||
},
|
||||
optipng: {
|
||||
optimizationLevel: 7
|
||||
},
|
||||
mozjpeg: {
|
||||
quality: 70
|
||||
},
|
||||
pngquant: {
|
||||
quality: [0.8, 0.9],
|
||||
speed: 4
|
||||
},
|
||||
svgo: {
|
||||
plugins: [
|
||||
{
|
||||
name: 'removeViewBox'
|
||||
},
|
||||
{
|
||||
name: 'removeEmptyAttrs',
|
||||
active: false
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
]
|
||||
},
|
||||
|
||||
experimental: {
|
||||
|
@ -53,7 +53,8 @@
|
||||
"sass-loader": "^16.0.4",
|
||||
"sharp": "^0.33.5",
|
||||
"typescript": "~5.7.2",
|
||||
"vant": "^4.9.15"
|
||||
"vant": "^4.9.15",
|
||||
"vite-plugin-imagemin": "^0.6.1"
|
||||
},
|
||||
"pnpm": {
|
||||
"peerDependencyRules": {
|
||||
|
2161
pnpm-lock.yaml
2161
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user