Vue项目整合

这次开发中，遇到需要管理多个独立的Vue项目的情况，客户希望将多个vue的网站项目放进U盘中并能打开。最开始我想到用Electron做成exe，结果发现项目node版本比较低，导致electron总是下不成功，后面退而求其次，想到了可以直接用html文件打开。本文分享一个实用简单的解决方案：如何将19个独立的Vue项目打包后，整合到同一个导航页面中，实现一键访问所有项目。

解决方案

比如我们有19个独立的Vue网站项目（命名为project1、project2...project19），每个项目都已经开发完成并通过npm run build生成了静态文件。那么我可以将所有项目的静态文件放在一处，并创建一个统一的导航页面，用户可以通过这个页面快速访问任何一个项目。

1. 项目结构设计

首先，我们需要规划一个清晰的项目目录结构：

复制代码

根目录/
├── index.html                    # 导航主页
├── projects/                     # 存放所有子项目的打包文件
│   ├── project1/
│   │   ├── index.html
│   │   ├── css/
│   │   ├── js/
│   │   └── favicon.ico
│   ├── project2/
│   │   └── ...（同上）
│   └── ...（共19个项目）

2. Vue项目配置调整

在将每个Vue项目打包之前，需要确保以下配置正确：

2.1 修改 `vue.config.js`

复制代码

// 确保使用相对路径
module.exports = {
  publicPath: './',  // 关键配置：使用相对路径
  outputDir: 'dist',
  assetsDir: 'static',
  productionSourceMap: false
}

publicPath必须设为./，确保相对路径正确

2.2 调整路由配置

复制代码

// src/router/index.js
const router = new VueRouter({
  mode: 'hash',  // 使用hash模式，兼容本地文件
  base: './',     // 使用相对路径
  routes
})

必须使用hash模式，因为history模式需要服务器支持

3. 构建导航页面

创建主导航页面 index.html：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue项目导航中心</title>
    <style>
        /* 样式代码 - 网格布局，响应式设计 */
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        .project-card {
            background: white;
            border-radius: 12px;
            padding: 25px 20px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Vue项目导航中心</h1>
        <div class="projects-grid" id="projectsContainer"></div>
    </div>
    
    <script>
        // 19个项目的配置数据
        const projects = [
            {
                id: 'project1',
                name: '项目1',
                desc: '第一个Vue项目',
                url: 'projects/project1/index.html#/',
                iconPath: 'projects/project1/favicon.ico',
                fallbackIcon: '🚀'
            },
            {
                id: 'project2',
                name: '项目2',
                desc: '第二个Vue项目',
                url: 'projects/project2/index.html#/',
                iconPath: 'projects/project2/favicon.ico',
                fallbackIcon: '🎨'
            },
            // ... 其他17个项目配置
        ];
        
        // 动态生成项目卡片
        const container = document.getElementById('projectsContainer');
        
        projects.forEach(project => {
            const card = document.createElement('a');
            card.href = project.url;
            card.className = 'project-card';
            card.target = '_blank';
            
            // 图标处理
            const iconContainer = document.createElement('div');
            iconContainer.className = 'icon-container';
            
            const iconImg = new Image();
            iconImg.src = project.iconPath;
            iconImg.alt = `${project.name} 图标`;
            iconImg.className = 'project-icon';
            
            // 图标加载失败处理
            iconImg.onerror = function() {
                iconContainer.innerHTML = `<div class="icon-placeholder">${project.fallbackIcon}</div>`;
            };
            
            iconContainer.appendChild(iconImg);
            
            // 项目信息
            card.innerHTML = `
                ${iconContainer.outerHTML}
                <div class="project-name">${project.name}</div>
                <div class="project-desc">${project.desc}</div>
            `;
            
            container.appendChild(card);
        });
    </script>
</body>
</html>

这样就完成啦，只需要双击打开主导航页面 index.html就可以看到所有的网站项目。最后把整个文件夹放进U盘就行啦。

解决方案

1. 项目结构设计

2. Vue项目配置调整

2.1 修改 vue.config.js

2.2 调整路由配置

3. 构建导航页面

2.1 修改 `vue.config.js`