feat: 20250616 AI健康、AI婚恋页面组件；
路由配置「解决页面跳转不置顶问题」； 优化打包配置「自动压缩项目图片」；
This commit is contained in:
parent
92f39550e1
commit
320871c60d
@ -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>
|
||||||
|
|||||||
@ -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"
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -45,6 +45,11 @@ export const createApp = ViteSSG(
|
|||||||
}
|
}
|
||||||
next()
|
next()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
ctx.router.afterEach(() => {
|
||||||
|
// 确保页面滚动到顶部
|
||||||
|
window.scrollTo({ top: 0, behavior: 'auto' })
|
||||||
|
})
|
||||||
}
|
}
|
||||||
// _ctx => {
|
// _ctx => {
|
||||||
// // 确保路由插件被安装
|
// // 确保路由插件被安装
|
||||||
|
|||||||
@ -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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -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
|
||||||
|
|||||||
@ -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";`,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user