dengzhifeng/ufutx-pc-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 20250616 AI健康、AI婚恋页面组件；

Browse Source 
路由配置「解决页面跳转不置顶问题」；
	优化打包配置「自动压缩项目图片」；
This commit is contained in:
mac·ufutx 2025-06-16 18:34:43 +08:00
parent 92f39550e1
commit 320871c60d
7 changed files with 71 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.html
View File

@ -3,11 +3,17 @@
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/vite.svg"/>
<!-- <link href="https://cdn.jsdelivr.net/npm/element-plus@2.4.10/dist/index.min.css" rel="stylesheet">-->
<link href="https://cdn.jsdelivr.net/npm/element-plus@2.4.10/dist/index.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Vite + Vue + TS</title>
</head>
<body>
<div id="app"></div>
<!--<script src="https://cdn.jsdelivr.net/npm/element-plus@2.4.10/dist/index.full.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/element-plus@2.4.10/dist/index.full.min.js"></script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

1
package.json
View File

@ -58,6 +58,7 @@
"unplugin-auto-import": "^19.3.0",
"unplugin-vue-components": "^28.7.0",
"vite": "^5.4.19",
"vite-plugin-html": "^3.2.2",
"vite-plugin-imagemin": "^0.6.1",
"vite-ssg": "^27.0.1",
"vue-tsc": "1.8.14"

2
src/layout/Layout.vue
View File

@ -7,8 +7,8 @@
<!-- <main class="layout-main">-->
<!-- <slot></slot>-->
<!-- </main>-->
<router-view></router-view>
<!-- 页脚 -->
<Footer />
</div>

5
src/main.ts
View File

@ -45,6 +45,11 @@ export const createApp = ViteSSG(
}
next()
})
ctx.router.afterEach(() => {
// 确保页面滚动到顶部
window.scrollTo({ top: 0, behavior: 'auto' })
})
}
// _ctx => {
// // 确保路由插件被安装

9
src/router/index.ts
View File

@ -7,7 +7,14 @@ const router = createRouter({
routes,
scrollBehavior(_to, _from, savedPosition) {
// 添加下划线标记未使用参数
return savedPosition || { top: 0 }
// 当用户点击浏览器后退/前进按钮时，保留之前的滚动位置
if (savedPosition) {
return savedPosition
}
// 否则每次导航后都滚动到顶部
else {
return { top: 0, behavior: 'auto' } // 平滑滚动到顶部 auto、smooth
}
}
})

42
src/router/routes.ts
View File

@ -1,12 +1,12 @@
// src/router/routes.ts
import type { RouteRecordRaw } from 'vue-router' // 添加type关键字
import Home from '@/views/Home/Home.vue'
import News from '@/views/News/News.vue'
import Network from '@/views/Network/Network.vue'
import Dating from '@/views/Dating/Dating.vue'
import App from '@/views/App/App.vue'
import Ecosystem from '@/views/Ecosystem/Ecosystem.vue'
import About from '@/views/About/About.vue'
// import Home from '@/views/Home/Home.vue'
// import News from '@/views/News/News.vue'
// import Network from '@/views/Network/Network.vue'
// import Dating from '@/views/Dating/Dating.vue'
// import App from '@/views/App/App.vue'
// import Ecosystem from '@/views/Ecosystem/Ecosystem.vue'
// import About from '@/views/About/About.vue'
// import About from '@/views/About.vue'
// import I18nDemo from '../views/I18nDemo.vue'
import Layout from '@/layout/Layout.vue'
@ -15,15 +15,15 @@ const routes: RouteRecordRaw[] = [
path: '/',
component: Layout,
children: [
{ path: '', name: 'Home', component: Home },
{ path: 'news', name: 'News', component: News },
{ path: 'network', name: 'Network', component: Network },
{ path: 'dating', name: 'Dating', component: Dating },
{ path: 'app', name: 'App', component: App },
{ path: 'ecosystem', name: 'Ecosystem', component: Ecosystem },
{ path: 'about', name: 'About', component: About }
{ path: '', name: 'Home', component: () => import('@/views/Home/Home.vue') },
{ path: 'news', name: 'News', component: () => import('@/views/News/News.vue') },
{ path: 'network', name: 'Network', component: () => import('@/views/Network/Network.vue') },
{ path: 'dating', name: 'Dating', component: () => import('@/views/Dating/Dating.vue') },
{ path: 'app', name: 'App', component: () => import('@/views/App/App.vue') },
{ path: 'ecosystem', name: 'Ecosystem', component: () => import('@/views/Ecosystem/Ecosystem.vue') },
{ path: 'about', name: 'About', component: () => import('@/views/About/About.vue') }
]
}
},
// {
// path: '/i18n-demo',
// name: 'I18nDemo',
@ -48,12 +48,12 @@ const routes: RouteRecordRaw[] = [
// title: '关于我们 - 极简官网'
// } as { title: string }
// },
// {
// path: '/:pathMatch(.*)*',
// name: 'NotFound',
// component: () => import('@/views/NotFound.vue'),
// meta: { title: '404 - 页面不存在' } as { title: string }
// }
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('@/views/NotFound.vue'),
meta: { title: '404 - 页面不存在' } as { title: string }
}
]
export default routes

32
vite.config.ts
View File

@ -50,11 +50,32 @@ export default defineConfig({
],
build: {
rollupOptions: {
// external: ['element-plus', 'element-plus/dist/index.css'], // 排除 Element Plus
// external: ['element-plus'], // 排除 Element Plus 从打包中
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
// 将第三方库单独分包（如 axios、vue 等）
return id.split('node_modules/')[1].split('/')[0]
// 只打包实际使用的 Element Plus 组件
// if (id.includes('element-plus/es/components')) {
// const componentName = id.split('element-plus/es/components/')[1].split('/')[0]
// return `element-${componentName}`
// }
// if (id.includes('node_modules')) {
// // 将第三方库单独分包（如 axios、vue 等）
// return id.split('node_modules/')[1].split('/')[0]
// }
// 1. 将 Element Plus 整体打包为一个 chunk
// 只分割实际使用的库
if (id.includes('vue') || id.includes('vue-router') || id.includes('pinia')) {
return 'vue-vendor'
}
if (id.includes('axios') || id.includes('nprogress')) {
return 'utils'
}
// 不强制分割第三方依赖，让 Vite 自动处理
if (id.includes('node_modules') && !id.includes('@babel') && !id.includes('@types')) {
return undefined // 取消手动分割
}
}
}
@ -62,6 +83,11 @@ export default defineConfig({
},
css: {
preprocessorOptions: {
scss: {
// 关键配置：强制 Sass 使用现代 API（二选一，推荐 modern-compiler）
api: 'modern-compiler'
// api: 'modern' // 轻量版，适合简单场景
},
less: {
// 关键配置：自动注入 global.less
additionalData: `@import "@/styles/global.less";`,