在前端开发中，Vue 3 和 Vite 已经成为了越来越受欢迎的工具。其中，Vite 作为一个快速构建工具，与 Vue 3 结合使用，可以提高开发效率和性能。在实际项目中，一个项目会包含多个子项目，需要达成多个子项目的dist包。本文将介绍如何使用 Vue 3 + Vite 搭建多项目环境，并在打包时生成多个 dist 包。
1. 创建一个主项目环境
使用命令，快速创建一个住项目的环境
npm create vue@latest
2. 子项目目录
3. 子项目文件
在两个子项目中分别创建App.vue和main.js文件
我这里的代码直接使用vue创建时的代码，需要改的地方是资源，文件的路径
App.vue
```javascript
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from '../../components/HelloWorld.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="../../assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
</div>
</header>
<RouterView />
</template>
<style scoped>
header {
line-height: 1.5;
max-height: 100vh;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
nav {
width: 100%;
font-size: 12px;
text-align: center;
margin-top: 2rem;
}
nav a.router-link-exact-active {
color: var(--color-text);
}
nav a.router-link-exact-active:hover {
background-color: transparent;
}
nav a {
display: inline-block;
padding: 0 1rem;
border-left: 1px solid var(--color-border);
}
nav a:first-of-type {
border: 0;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
nav {
text-align: left;
margin-left: -1rem;
font-size: 1rem;
padding: 1rem 0;
margin-top: 1rem;
}
}
</style>
main.js
import '../../assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from '../../router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
然后在于index.html同级的地方添加两个对应子项目 的html，如果项目的title，图标一致，可以直接用index.html，不需要新建html文件
projecta.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>项目Ap</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/projects/projectA/main.js"></script>
</body>
</html>
4. 配置多个 dist 包
新建projectConfig.js，存放子项目的入口配置
export const configMap = {
projectA:{
minify: true,
pages: [
{
filename: 'projecta', // filename 默认是template文件名，就是beijing.html
entry: 'src/projects/projectA/main.js',
template: 'projecta.html',
},
],
},
projectB:{
minify: true,
pages: [
{
filename: 'projectb',
entry: 'src/projects/proiectB/main.js',
template: 'projectb.html',
},
],
}
}
然后修改vite.config.js如下：
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createHtmlPlugin } from 'vite-plugin-html';
import { resolve } from 'node:path';
import { configMap } from './projectConfig'
const projectName = process.env.PROJECT_NAME
export default defineConfig({
base: './', // 方便打包后预览
publicDir: 'public', // 默认 public
plugins: [
vue(),
createHtmlPlugin(configMap[projectName])
],
resolve:{
alias:{
'@':resolve(__dirname,'src')
}
},
build:
{
cssCodeSplit: true,
emptyOutDir: true,
sourcemap: false,
assetsDir: 'assets', // 默认 assets
outDir: `dist-${projectName}`, // 输出到dist
rollupOptions: {
input: {
},
output: {
compact: true,
entryFileNames: "assets/js/[name]-[hash].js",
chunkFileNames: "assets/js/[name]-[hash].js",
assetFileNames: "assets/[ext]/[name].[ext]",
}
}
},
})
package.json文件也需要重新修改scripts部分，主要实现npm run build打出多个dist包
package.json
"scripts": {
"dev": "vite",
"build": "node dynamic-build-all.js",
"preview": "vite preview"
},
dynamic-build-all.js：
import { projects } from './projects.js';
import { execSync } from 'child_process';
const projectNames = Object.keys(projects);
for (const projectName of projectNames) {
console.log(`Building ${projectName}...`);
const command = projects[projectName].buildCommand;
execSync(command, { stdio: 'inherit' });
}
projects.js存放项目配置
export const projects = {
projectA: {
name: "projectA",
buildCommand: "cross-env PROJECT_NAME=projectA vite build",
desc: "协议一"
},
projectB: {
name: "projectB",
buildCommand: "cross-env PROJECT_NAME=projectB vite build",
desc: "协议二"
}
}
5. 打包操作
多个包的配置已经完善，直接执行打包命令即可
npm run build
通过以上操作，我们可以轻松地在 Vue 3 + Vite 环境下管理多个项目，并通过配置不同的 Vite 配置文件来生成多个独立的 dist 包。这样，我们可以更加灵活地进行项目管理和部署。希望本文能够帮助您顺利完成多项目多 dist 打包操作！祝您编程愉快！🚀👨💻🌟
