配置文件

3 months ago · f39a2bdfb0
2 changed files with 133 additions and 46 deletions
--- a/src/main.js
+++ b/src/main.js
@ -1,15 +1,87 @@
+// src/main.js
 import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 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)
+  let page = 'landingManagement' // 默认页面
+
+  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()
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -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 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`
+
+    // 在项目根目录创建 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
 }

-  return {
-    // 确保基础路径正确
+export default defineConfig({
+  plugins: [vue()],
+  // 设置基础路径为相对路径
  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]'    // 静态资源命名
-        }
+        // 添加 index.html 作为默认页面
+        index: resolve(__dirname, 'index.html'),
+        ...createHTMLFiles()
      }
    },
-    server: {
-      port: 5173,
-      open: true
+    // 资源文件放在根目录（空字符串）
+    assetsDir: '',
+    // 清理输出目录
+    emptyOutDir: true
  },
+  preview: {
+    port: 4173,
+    host: true,
+    // 设置默认打开的页面
+    open: '/landingManagement.html'
  }
 })