refactor(app): 重构应用配置和样式
- 移除 colorMode 相关代码 - 删除全局样式文件 - 更新 nuxt 配置: - 添加 runtimeConfig - 更新 css 配置 - 优化 vite构建配置 - 新增 image 模块配置 - 更新路由配置 - 调整组件实现 - 更新环境变量加载方式
This commit is contained in:
xingyy
parent
fb8a72b47a
commit
3b8bd623c0
@ -1,7 +1,6 @@
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import {message} from '@/components/x-message/useMessage.js'
|
||||
// message.success('success')
|
||||
|
||||
useHead({
|
||||
title: useI18n().t('appSetting.appName'),
|
||||
meta: [
|
||||
@ -9,10 +8,6 @@ useHead({
|
||||
{ name: 'keywords', content: useI18n().t('appSetting.appKeyWords') },
|
||||
],
|
||||
})
|
||||
const color = useColorMode()
|
||||
const mode = computed(() => {
|
||||
return color.value
|
||||
})
|
||||
|
||||
// 添加路由中间件来处理过渡方向
|
||||
const router = useRouter()
|
||||
@ -42,7 +37,7 @@ provide('slideDirection', slideDirection)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VanConfigProvider :theme="mode">
|
||||
<VanConfigProvider>
|
||||
<NuxtLoadingIndicator
|
||||
color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
|
||||
<NuxtLayout>
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<script setup>
|
||||
import { useAppFooterRouteNames as names } from '~/config/index.js'
|
||||
import MyIcon from "~/components/icons/MyIcon.vue";
|
||||
import HomeIcon from "~/components/icons/HomeIcon.vue";
|
||||
import { useAppFooterRouteNames as names } from '@/config/index.js'
|
||||
import MyIcon from "@/components/icons/MyIcon.vue";
|
||||
import HomeIcon from "@/components/icons/HomeIcon.vue";
|
||||
const route = useRoute()
|
||||
|
||||
const active = ref(0)
|
||||
const show = computed(() => {
|
||||
if (route.name && names.includes(route.name))
|
||||
@ -13,7 +12,6 @@ const show = computed(() => {
|
||||
const initData=()=>{
|
||||
active.value=route.path==='/profile'?1:0
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
initData()
|
||||
})
|
||||
@ -21,7 +19,6 @@ onMounted(()=>{
|
||||
|
||||
<template>
|
||||
<div v-if="show">
|
||||
|
||||
<van-tabbar v-model="active" route placeholder fixed>
|
||||
<van-tabbar-item replace to="/">
|
||||
<span>{{ $t('tabbar.home') }}</span>
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
<script setup>
|
||||
/*
|
||||
* 此组件的目的是使用该图片组件自带预览大图
|
||||
* */
|
||||
import { showImagePreview } from 'vant';
|
||||
import { NuxtImg } from '#components'
|
||||
const props = defineProps({
|
||||
src: {
|
||||
type: String,
|
||||
@ -11,19 +9,48 @@ const props = defineProps({
|
||||
preview: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 用于控制图片尺寸
|
||||
sizes: {
|
||||
type: Array,
|
||||
default: () => [320, 640, 768, 1024]
|
||||
},
|
||||
// 用于控制图片格式
|
||||
format: {
|
||||
type: String,
|
||||
default: 'webp'
|
||||
},
|
||||
// 用于控制图片质量
|
||||
quality: {
|
||||
type: Number,
|
||||
default: 80
|
||||
}
|
||||
})
|
||||
|
||||
const showImage = () => {
|
||||
if (props.preview) {
|
||||
showImagePreview([props.src]);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<img
|
||||
<nuxt-img
|
||||
loading="lazy"
|
||||
v-bind="{ ...props, ...$attrs }"
|
||||
style="object-fit: cover"
|
||||
@click="showImage"
|
||||
>
|
||||
:src="src"
|
||||
:sizes="sizes"
|
||||
:format="format"
|
||||
:quality="quality"
|
||||
placeholder
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(img) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@ -1,3 +1,3 @@
|
||||
|
||||
export const useAppFooterRouteNames= ['home', 'profile']
|
||||
export const useAppHeaderRouteNames= ['home', 'profile','login']
|
||||
export const useAppFooterRouteNames= ['index', 'profile']
|
||||
export const useAppHeaderRouteNames= ['index', 'profile','login']
|
||||
|
||||
@ -10,13 +10,12 @@ import {ref} from "vue";
|
||||
const {fullLive, getAuctionDetail, auctionDetail, itemList, pageRef, liveRef} = goodStore();
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
title: '主页',
|
||||
i18n: 'menu.home',
|
||||
})
|
||||
const changeLive = () => {
|
||||
fullLive.value = true;
|
||||
};
|
||||
const showBottom = ref(true)
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -73,7 +72,7 @@ const showBottom = ref(true)
|
||||
.changeLive {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
transition: height 0.5s ease, transform 0.5s ease;
|
||||
transition: height 0.4s ease, transform 0.4s ease;
|
||||
}
|
||||
|
||||
.changeLive.collapsed {
|
||||
|
||||
7
app/pages/index.vue
Normal file
7
app/pages/index.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<script setup>
|
||||
import Home from './home/index.vue'
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<Home/>
|
||||
</template>
|
||||
@ -1,4 +0,0 @@
|
||||
:root:root {
|
||||
--van-primary-color: var(--c-primary);
|
||||
--van-cell-group-inset-padding: 0;
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
#__nuxt {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
background: var(--van-gray-1);
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
background: #222;
|
||||
color-scheme: dark;
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
:root {
|
||||
--c-primary: #3554AF;
|
||||
--c-primary-active: #3554AF;
|
||||
}
|
||||
211
nuxt.config.js
211
nuxt.config.js
@ -1,61 +1,58 @@
|
||||
// 导入环境变量处理库
|
||||
import dotenv from 'dotenv'
|
||||
// 导入 Node.js 进程模块
|
||||
import process from 'node:process'
|
||||
// 导入预加载工具函数
|
||||
import preload from './app/utils/preload'
|
||||
// 导入国际化语言配置
|
||||
import { currentLocales } from './i18n/i18n'
|
||||
|
||||
// 设置环境变量文件路径，默认使用 .env.test
|
||||
const envFile = process.env.ENV_FILE || '.env.test'
|
||||
// 加载环境变量配置
|
||||
dotenv.config({ path: `./env/${envFile}` })
|
||||
|
||||
// 过滤出以 NUXT_PUBLIC_ 开头的环境变量作为公共配置
|
||||
const publicConfig = Object.entries(process.env)
|
||||
.filter(([key]) => key.startsWith('NUXT_PUBLIC_'))
|
||||
.reduce((config, [key, value]) => {
|
||||
config[key] = value
|
||||
return config
|
||||
}, {})
|
||||
.filter(([key]) => key.startsWith('NUXT_PUBLIC_'))
|
||||
.reduce((config, [key, value]) => {
|
||||
config[key] = value
|
||||
return config
|
||||
}, {})
|
||||
|
||||
export default defineNuxtConfig({
|
||||
hooks: {
|
||||
'pages:extend'(pages) {
|
||||
const indexPage = pages.findIndex(page => page.path === '/')
|
||||
if (indexPage !== -1) {
|
||||
pages.splice(indexPage, 1)
|
||||
}
|
||||
pages.push({
|
||||
name: 'home',
|
||||
path: '/',
|
||||
file: '@/pages/home/index.vue'
|
||||
})
|
||||
}
|
||||
},
|
||||
// 注册 Nuxt 模块
|
||||
modules: [
|
||||
'@vant/nuxt',
|
||||
'@unocss/nuxt',
|
||||
'@nuxtjs/color-mode',
|
||||
'@nuxtjs/i18n',
|
||||
'@nuxt/image', // 图片优化模块
|
||||
'@vant/nuxt', // Vant UI 组件库
|
||||
'@unocss/nuxt', // 原子化 CSS 框架
|
||||
'@nuxtjs/i18n', // 国际化模块
|
||||
],
|
||||
|
||||
// 运行时配置
|
||||
runtimeConfig: {
|
||||
// 私有配置，只有在服务端可用
|
||||
// 私有配置，只在服务端可用
|
||||
apiSecret: process.env.NUXT_API_SECRET || 'default_secret',
|
||||
// 公共配置，客户端和服务端都可用
|
||||
public: publicConfig,
|
||||
},
|
||||
|
||||
// CSS 配置
|
||||
css: [
|
||||
'@unocss/reset/tailwind.css',
|
||||
'./app/styles/vars.css',
|
||||
'./app/styles/global.css',
|
||||
'./app/styles/default-theme.css',
|
||||
'@unocss/reset/tailwind.css', // 重置默认样式
|
||||
],
|
||||
|
||||
// PostCSS 配置
|
||||
postcss: {
|
||||
plugins: {
|
||||
'autoprefixer': {},
|
||||
|
||||
// https://github.com/wswmsword/postcss-mobile-forever
|
||||
'autoprefixer': {}, // 自动添加 CSS 前缀
|
||||
// 移动端适配插件配置
|
||||
'postcss-mobile-forever': {
|
||||
appSelector: '#__nuxt',
|
||||
viewportWidth: 375,
|
||||
maxDisplayWidth: 600,
|
||||
// devtools excluded
|
||||
exclude: /@nuxt/,
|
||||
border: true,
|
||||
appSelector: '#__nuxt', // 根选择器
|
||||
viewportWidth: 375, // 设计稿宽度
|
||||
maxDisplayWidth: 600, // 最大显示宽度
|
||||
exclude: /@nuxt/, // 排除的文件
|
||||
border: true, // 显示边框
|
||||
rootContainingBlockSelectorList: [
|
||||
'van-tabbar',
|
||||
'van-popup',
|
||||
@ -64,89 +61,153 @@ export default defineNuxtConfig({
|
||||
},
|
||||
},
|
||||
|
||||
colorMode: {
|
||||
classSuffix: '',
|
||||
preference: 'system',
|
||||
fallback: 'light',
|
||||
storageKey: 'nuxt-color-mode',
|
||||
},
|
||||
|
||||
// 国际化配置
|
||||
i18n: {
|
||||
locales: currentLocales,
|
||||
lazy: true,
|
||||
strategy: 'no_prefix',
|
||||
locales: currentLocales, // 支持的语言列表
|
||||
lazy: true, // 懒加载语言包
|
||||
strategy: 'no_prefix', // URL 策略：不添加语言前缀
|
||||
detectBrowserLanguage: {
|
||||
useCookie: true,
|
||||
cookieKey: 'i18n_redirected',
|
||||
redirectOn: 'root',
|
||||
alwaysRedirect: true,
|
||||
fallbackLocale: 'zh-CN'
|
||||
useCookie: true, // 使用 cookie 存储语言选择
|
||||
cookieKey: 'i18n_redirected', // cookie 键名
|
||||
redirectOn: 'root', // 仅在根路径重定向
|
||||
alwaysRedirect: true, // 总是重定向
|
||||
fallbackLocale: 'zh-CN' // 默认语言
|
||||
},
|
||||
langDir: 'locales',
|
||||
defaultLocale: 'zh-CN',
|
||||
vueI18n: './i18n/i18n.config.ts',
|
||||
langDir: 'locales', // 语言文件目录
|
||||
defaultLocale: 'zh-CN', // 默认语言
|
||||
vueI18n: './i18n/i18n.config.ts', // Vue I18n 配置文件
|
||||
},
|
||||
|
||||
// 应用配置
|
||||
app: {
|
||||
// 布局过渡动画
|
||||
layoutTransition: {
|
||||
name: 'layout',
|
||||
mode: 'out-in'
|
||||
},
|
||||
// 头部配置
|
||||
head: {
|
||||
// 视口配置
|
||||
viewport: 'width=device-width,initial-scale=1,viewport-fit=cover',
|
||||
// 链接配置
|
||||
link: [
|
||||
{ rel: 'icon', href: '/favicon.ico', sizes: 'any' },
|
||||
{ rel: 'icon', href: '/favicon.ico', sizes: 'any' }, // 网站图标
|
||||
{ rel: 'preload', as: 'style', href: '/critical.css' }, // 预加载关键 CSS
|
||||
{ rel: 'preconnect', href: '你的API域名' }, // 预连接 API 域名
|
||||
{ rel: 'dns-prefetch', href: '你的API域名' }, // DNS 预解析
|
||||
],
|
||||
// Meta 标签配置
|
||||
meta: [
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover,user-scalable=no' },
|
||||
{ name: 'apple-mobile-web-app-capable', content: 'yes' },
|
||||
{ name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' },
|
||||
{ name: 'theme-color', media: '(prefers-color-scheme: light)', content: '#ffffff' },
|
||||
{ name: 'theme-color', media: '(prefers-color-scheme: dark)', content: '#222222' },
|
||||
{ name: 'apple-mobile-web-app-capable', content: 'yes' }, // iOS 应用模式
|
||||
{ name: 'apple-mobile-web-app-status-bar-style', content: 'black-translucent' }, // iOS 状态栏样式
|
||||
{ name: 'theme-color', media: '(prefers-color-scheme: light)', content: '#ffffff' }, // 浅色主题色
|
||||
{ name: 'theme-color', media: '(prefers-color-scheme: dark)', content: '#222222' }, // 深色主题色
|
||||
{ name: 'description', content: '你的网站描述' }, // SEO 描述
|
||||
{ 'http-equiv': 'x-dns-prefetch-control', content: 'on' }, // DNS 预解析控制
|
||||
],
|
||||
// 脚本配置
|
||||
script: [
|
||||
{ innerHTML: preload(), type: 'text/javascript', tagPosition: 'head' },
|
||||
{ innerHTML: preload(), type: 'text/javascript', tagPosition: 'head' }, // 预加载脚本
|
||||
// 性能监控脚本
|
||||
{
|
||||
innerHTML: `
|
||||
window.performance.mark('app-start');
|
||||
new PerformanceObserver((entryList) => {
|
||||
for (const entry of entryList.getEntries()) {
|
||||
console.log('FCP:', entry.startTime);
|
||||
}
|
||||
}).observe({entryTypes: ['paint']});
|
||||
`,
|
||||
type: 'text/javascript',
|
||||
tagPosition: 'head'
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
// Vite 构建配置
|
||||
vite: {
|
||||
build: {
|
||||
target: 'esnext',
|
||||
target: 'esnext', // 构建目标
|
||||
// Rollup 配置
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
'vant': ['vant'], // Vant 单独打包
|
||||
'vendor': ['vue', 'vue-router'] // 核心库单独打包
|
||||
}
|
||||
}
|
||||
},
|
||||
minify: 'terser', // 使用 terser 压缩
|
||||
terserOptions: {
|
||||
compress: {
|
||||
drop_console: true, // 移除 console
|
||||
drop_debugger: true // 移除 debugger
|
||||
}
|
||||
}
|
||||
},
|
||||
// 依赖优化配置
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
'@intlify/core-base',
|
||||
'@intlify/shared',
|
||||
'is-https',
|
||||
'@intlify/core-base', // I18n 核心
|
||||
'@intlify/shared', // I18n 共享库
|
||||
'is-https', // HTTPS 检测
|
||||
'vant', // Vant UI
|
||||
'@vant/use', // Vant Hooks
|
||||
'@vueuse/core', // VueUse 工具集
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
// 实验性功能
|
||||
experimental: {
|
||||
typedPages: true,
|
||||
typedPages: true, // 启用页面类型
|
||||
},
|
||||
|
||||
// 开发工具
|
||||
devtools: {
|
||||
enabled: true,
|
||||
enabled: true, // 启用开发工具
|
||||
},
|
||||
|
||||
// TypeScript 配置
|
||||
typescript: {
|
||||
shim: false,
|
||||
shim: false, // 禁用 shim
|
||||
},
|
||||
|
||||
// 功能特性配置
|
||||
features: {
|
||||
// For UnoCSS
|
||||
inlineStyles: false,
|
||||
inlineStyles: false, // 禁用内联样式
|
||||
},
|
||||
|
||||
// 未来特性配置
|
||||
future: {
|
||||
compatibilityVersion: 4,
|
||||
compatibilityVersion: 4, // 兼容性版本
|
||||
},
|
||||
// 指定 Nuxt 应用程序的兼容性日期，确保应用程序在未来的 Nuxt 版本中保持稳定性
|
||||
compatibilityDate: '2025-01-09',
|
||||
|
||||
// Nuxt 兼容性日期
|
||||
compatibilityDate: '2025-01-09', // 确保未来版本兼容性
|
||||
|
||||
// 开发服务器配置
|
||||
devServer: {
|
||||
host: '0.0.0.0', // Set the host to 'localhost'
|
||||
port: 3000, // Set the port to 3000 or any other port you prefer
|
||||
host: '0.0.0.0', // 主机地址
|
||||
port: 3000, // 端口号
|
||||
},
|
||||
|
||||
// 图片优化配置
|
||||
image: {
|
||||
provider: 'ipx', // 图片处理提供者
|
||||
// 响应式断点
|
||||
screens: {
|
||||
xs: 320, // 超小屏幕
|
||||
sm: 640, // 小屏幕
|
||||
md: 768, // 中等屏幕
|
||||
lg: 1024, // 大屏幕
|
||||
xl: 1280, // 超大屏幕
|
||||
xxl: 1536, // 特大屏幕
|
||||
},
|
||||
quality: 80, // 图片质量
|
||||
format: ['webp', 'jpg'], // 支持的格式
|
||||
placeholder: true, // 启用占位图
|
||||
blur: 3 // 模糊加载效果
|
||||
}
|
||||
})
|
||||
@ -17,7 +17,6 @@
|
||||
"start": "cross-env ENV_FILE=.env.prod nuxt start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxtjs/color-mode": "^3.5.2",
|
||||
"@nuxtjs/i18n": "^9.1.1",
|
||||
"@vueuse/core": "^12.4.0",
|
||||
"@yeger/vue-masonry-wall": "^5.0.17",
|
||||
@ -33,6 +32,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/carbon": "^1.2.5",
|
||||
"@nuxt/image": "^1.9.0",
|
||||
"@unocss/nuxt": "0.65.2",
|
||||
"@unocss/preset-rem-to-px": "0.65.2",
|
||||
"@vant/nuxt": "^1.0.6",
|
||||
|
||||
623
pnpm-lock.yaml
623
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user