2 changed files with 133 additions and 46 deletions
-
88src/main.js
-
91vite.config.js
@ -1,15 +1,87 @@ |
|||||
|
// src/main.js
|
||||
import { createApp } from 'vue' |
import { createApp } from 'vue' |
||||
import App from './App.vue' |
|
||||
import router from './router' |
|
||||
import ElementPlus from 'element-plus' |
import ElementPlus from 'element-plus' |
||||
import 'element-plus/dist/index.css' |
import 'element-plus/dist/index.css' |
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn' |
import zhCn from 'element-plus/es/locale/lang/zh-cn' |
||||
|
|
||||
const app = createApp(App) |
|
||||
|
// 获取当前页面名称
|
||||
|
function getCurrentPage() { |
||||
|
const path = window.location.pathname |
||||
|
console.log('Current path:', path) |
||||
|
|
||||
app.use(router) |
|
||||
app.use(ElementPlus, { |
|
||||
locale: zhCn |
|
||||
}) |
|
||||
|
let page = 'landingManagement' // 默认页面
|
||||
|
|
||||
app.mount('#app') |
|
||||
|
if (path.includes('/pages/')) { |
||||
|
page = path.split('/pages/').pop().replace('.html', '') |
||||
|
} else if (path.endsWith('.html')) { |
||||
|
page = path.split('/').pop().replace('.html', '') |
||||
|
} |
||||
|
|
||||
|
console.log('Detected page:', page) |
||||
|
return page |
||||
|
} |
||||
|
|
||||
|
// 动态加载对应的 Vue 组件
|
||||
|
async function bootstrap() { |
||||
|
const pageName = getCurrentPage() |
||||
|
console.log('Loading page:', pageName) |
||||
|
|
||||
|
try { |
||||
|
// 动态导入所有 admin 目录下的 Vue 文件
|
||||
|
const modules = import.meta.glob('./views/admin/*.vue') |
||||
|
const modulePath = `./views/admin/${pageName}.vue` |
||||
|
|
||||
|
console.log('Looking for module:', modulePath) |
||||
|
console.log('Available modules:', Object.keys(modules)) |
||||
|
|
||||
|
if (modules[modulePath]) { |
||||
|
const module = await modules[modulePath]() |
||||
|
console.log('Module loaded successfully') |
||||
|
|
||||
|
// 创建并挂载应用
|
||||
|
const app = createApp(module.default) |
||||
|
app.use(ElementPlus, { |
||||
|
locale: zhCn |
||||
|
}) |
||||
|
app.mount('#app') |
||||
|
|
||||
|
console.log('App mounted successfully') |
||||
|
} else { |
||||
|
console.error(`Page ${pageName} not found`) |
||||
|
|
||||
|
// 显示错误页面
|
||||
|
const app = createApp({ |
||||
|
template: `
|
||||
|
<div style="padding: 50px; text-align: center;"> |
||||
|
<h1>页面未找到</h1> |
||||
|
<p>页面 ${pageName} 不存在</p> |
||||
|
<p>可用页面: ${Object.keys(modules).map(m => m.replace('./views/admin/', '').replace('.vue', '')).join(', ')}</p> |
||||
|
</div> |
||||
|
`
|
||||
|
}) |
||||
|
app.use(ElementPlus, { locale: zhCn }) |
||||
|
app.mount('#app') |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('Failed to load page:', error) |
||||
|
|
||||
|
// 显示错误信息
|
||||
|
const app = createApp({ |
||||
|
template: `
|
||||
|
<div style="padding: 20px; color: red;"> |
||||
|
<h2>页面加载失败</h2> |
||||
|
<p>错误: ${error.message}</p> |
||||
|
<p>请检查控制台获取详细信息</p> |
||||
|
</div> |
||||
|
`
|
||||
|
}) |
||||
|
app.mount('#app') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 启动应用
|
||||
|
if (document.readyState === 'loading') { |
||||
|
document.addEventListener('DOMContentLoaded', bootstrap) |
||||
|
} else { |
||||
|
bootstrap() |
||||
|
} |
||||
@ -1,46 +1,61 @@ |
|||||
import { fileURLToPath, URL } from 'node:url' |
|
||||
import { defineConfig, loadEnv } from 'vite' |
|
||||
|
// vite.config.js
|
||||
|
import { defineConfig } from 'vite' |
||||
import vue from '@vitejs/plugin-vue' |
import vue from '@vitejs/plugin-vue' |
||||
import vueDevTools from 'vite-plugin-vue-devtools' |
|
||||
|
import { resolve } from 'path' |
||||
|
import { readdirSync, writeFileSync } from 'fs' |
||||
|
|
||||
// https://vite.dev/config/
|
|
||||
export default defineConfig(({ mode, command }) => { |
|
||||
// 正确加载环境变量 - 只加载 VITE_ 前缀的变量:cite[9]
|
|
||||
const env = loadEnv(mode, process.cwd(), 'VITE_') |
|
||||
|
function createHTMLFiles() { |
||||
|
const viewsDir = './src/views/admin' |
||||
|
const vueFiles = readdirSync(viewsDir).filter(file => file.endsWith('.vue')) |
||||
|
const input = {} |
||||
|
|
||||
const outDirMap = { |
|
||||
development: 'dist-test', |
|
||||
production: 'dist-prod' |
|
||||
} |
|
||||
|
vueFiles.forEach(file => { |
||||
|
const pageName = file.replace('.vue', '') |
||||
|
const htmlFileName = `${pageName}.html` |
||||
|
|
||||
return { |
|
||||
// 确保基础路径正确
|
|
||||
base: './', |
|
||||
plugins: [ |
|
||||
vue(), |
|
||||
vueDevTools(), |
|
||||
], |
|
||||
resolve: { |
|
||||
alias: { |
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)) |
|
||||
}, |
|
||||
}, |
|
||||
build: { |
|
||||
outDir: outDirMap[mode] || 'dist', |
|
||||
rollupOptions: { |
|
||||
input: { |
|
||||
main: fileURLToPath(new URL('./index.html', import.meta.url)), |
|
||||
}, |
|
||||
output: { |
|
||||
entryFileNames: '[name].js', // 入口文件命名
|
|
||||
chunkFileNames: '[name].js', // 代码分割块命名
|
|
||||
assetFileNames: '[name].[ext]' // 静态资源命名
|
|
||||
} |
|
||||
|
// 在项目根目录创建 HTML 文件
|
||||
|
const htmlContent = `<!DOCTYPE html>
|
||||
|
<html lang="zh-CN"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8" /> |
||||
|
<link rel="icon" type="image/svg+xml" href="./vite.svg" /> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
|
<title>${pageName}</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="app"></div> |
||||
|
<script type="module" src="./src/main.js"></script> |
||||
|
</body> |
||||
|
</html>` |
||||
|
|
||||
|
writeFileSync(htmlFileName, htmlContent) |
||||
|
input[pageName] = resolve(__dirname, htmlFileName) |
||||
|
}) |
||||
|
|
||||
|
return input |
||||
|
} |
||||
|
|
||||
|
export default defineConfig({ |
||||
|
plugins: [vue()], |
||||
|
// 设置基础路径为相对路径
|
||||
|
base: './', |
||||
|
build: { |
||||
|
rollupOptions: { |
||||
|
input: { |
||||
|
// 添加 index.html 作为默认页面
|
||||
|
index: resolve(__dirname, 'index.html'), |
||||
|
...createHTMLFiles() |
||||
} |
} |
||||
}, |
}, |
||||
server: { |
|
||||
port: 5173, |
|
||||
open: true |
|
||||
}, |
|
||||
|
// 资源文件放在根目录(空字符串)
|
||||
|
assetsDir: '', |
||||
|
// 清理输出目录
|
||||
|
emptyOutDir: true |
||||
|
}, |
||||
|
preview: { |
||||
|
port: 4173, |
||||
|
host: true, |
||||
|
// 设置默认打开的页面
|
||||
|
open: '/landingManagement.html' |
||||
} |
} |
||||
}) |
}) |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue