这次开发中，遇到需要管理多个独立的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盘就行啦。