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> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/vite.svg"/> <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"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Vite + Vue + TS</title> <title>Vite + Vue + TS</title>
</head> </head>
<body> <body>
<div id="app"></div> <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> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

1
package.json
View File

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

2
src/layout/Layout.vue
View File

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

5
src/main.ts
View File

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

9
src/router/index.ts
View File

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

32
vite.config.ts
View File

@ -50,11 +50,32 @@ export default defineConfig({
], ],
build: { build: {
rollupOptions: { rollupOptions: {
// external: ['element-plus', 'element-plus/dist/index.css'], // 排除 Element Plus
// external: ['element-plus'], // 排除 Element Plus 从打包中
output: { output: {
manualChunks(id) { manualChunks(id) {
if (id.includes('node_modules')) { // 只打包实际使用的 Element Plus 组件
// 将第三方库单独分包（如 axios、vue 等） // if (id.includes('element-plus/es/components')) {
return id.split('node_modules/')[1].split('/')[0] // 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: { css: {
preprocessorOptions: { preprocessorOptions: {
scss: {
// 关键配置：强制 Sass 使用现代 API（二选一，推荐 modern-compiler）
api: 'modern-compiler'
// api: 'modern' // 轻量版，适合简单场景
},
less: { less: {
// 关键配置：自动注入 global.less // 关键配置：自动注入 global.less
additionalData: `@import "@/styles/global.less";`, additionalData: `@import "@/styles/global.less";`,