vue3 + vite 多項目多模塊打包
本示例基于
vite-plugin-html插件，實現(xiàn)多個獨立項目共存，共享組件和依賴，運行、打包互不干擾。
npm create vite@latest
兼容性注意
Vite 需要 Node.js 14.18+、16+版本，有些模板需要更高的版本
雖然創(chuàng)建項目用的14.17.5版本，但是后面運行項目用的18.15.0
HTML模板插件
npm i vite-plugin-html -D
#vite.config.ts
import {defineConfig} from "vite"
import vue from '@vitejs/plugin-vue'
import {createHtmlPlugin} from 'vite-plugin-html'
const htmlParams = {
minify: true,
pages: [
{
filename: 'index', // filename 默認是template文件名，就是index.html
entry: '/src/main.ts',
template: 'index.html',
}
]
}
export default defineConfig({
base: './', // 方便打包后預覽
publicDir: 'public', // 默認 public
plugins: [vue(), createHtmlPlugin(htmlParams)],
build: {
cssCodeSplit: true,
emptyOutDir: true,
sourcemap: false,
assetsDir: 'assets', // 默認 assets
outDir: 'dist', // 默認 dist
rollupOptions: {
input: {}, // input 不用管，插件內(nèi)會處理
output: {
compact: true,
entryFileNames: "static/js/[name]-[hash].js",
chunkFileNames: "static/js/[name]-[hash].js",
assetFileNames: "static/[ext]/[name].[ext]",
}
}
}
})
打包一下 驗證插件效果
npm run build
目錄改造
beijing.html nanjing.html src - beijing - App.vue - main.ts - nanjing - App.vue - main.ts
新增文件(項目模板)：beijing.html、nanjing.html
# beijing.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/static/imgs/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>北京項目</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/beijing/main.ts"></script>
</body>
</html>
nanjing.html內(nèi)容略(把北京的復制一份)
新增目錄及項目文件：beijing/App.vue、beijing/main.ts、nanjing/App.vue、nanjing/main.ts
# beijing/main.ts
import { createApp } from 'vue'
import '../style.css'
import App from './App.vue'
createApp(App).mount('#app')
# beijing/App.vue
<script setup lang="ts">
import HelloWorld from '../components/HelloWorld.vue'
</script>
<template>
<div>
<img src="/static/imgs/vite.svg" class="logo" alt="Vite logo"/>
<img src="../assets/vue.svg" class="logo vue" alt="Vue logo"/>
<h1>北京項目</h1>
</div>
<HelloWorld msg="HelloWorld"/>
</template>
nanjing/App.vue、nanjing/main.ts 內(nèi)容略(把北京的復制一份)
注意文件路徑，例如：
vite.svg、vue.svg、style.css
#vite.config.ts
import {defineConfig} from "vite"
import vue from '@vitejs/plugin-vue'
import {createHtmlPlugin} from 'vite-plugin-html'
const htmlParams = {
minify: true,
pages: [
{
filename: 'beijing', // filename 默認是template文件名，就是beijing.html
entry: '/src/beijing/main.ts',
template: 'beijing.html',
},
{
filename: 'nanjing',
entry: '/src/nanjing/main.ts',
template: 'nanjing.html',
},
]
}
export default defineConfig({
base: './', // 方便打包后預覽
publicDir: 'public', // 默認 public
plugins: [vue(), createHtmlPlugin(htmlParams)],
build: {
cssCodeSplit: true,
emptyOutDir: true,
sourcemap: false,
assetsDir: 'assets', // 默認 assets
outDir: 'dist', // 默認 dist
rollupOptions: {
input: {}, // input 不用管，插件內(nèi)會處理
output: {
compact: true,
entryFileNames: "static/js/[name]-[hash].js",
chunkFileNames: "static/js/[name]-[hash].js",
assetFileNames: "static/[ext]/[name].[ext]",
}
}
}
})
打包結(jié)果
我這的java項目集成的是FreeMarker，
把項目模板beijing.html改成beijing.ftl，修改文件里對應的靜態(tài)資源路徑，
前端打包之后，把dist下面的文件同步到java項目的static目錄。
別名配置
ts 配置，新增項
baseUrl、types、paths
# tsconfig.json
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"moduleResolution": "Node",
"strict": true,
"jsx": "preserve",
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
"skipLibCheck": true,
"noEmit": true,
"baseUrl": "src",
"types": ["vite/client"],
"paths": {"@/*": ["./*"]}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
vite 配置，新增項
resolve.alias文章來源：http://www.zghlxwxcb.cn/news/detail-497747.html
# vite.config.ts
import {resolve} from "path";
import {defineConfig} from "vite"
import vue from '@vitejs/plugin-vue'
import {createHtmlPlugin} from 'vite-plugin-html'
const htmlParams = {
minify: true,
pages: [
{
filename: 'beijing', // filename 默認是template文件名，就是beijing.html
entry: '/src/beijing/main.ts',
template: 'beijing.html',
},
{
filename: 'nanjing',
entry: '/src/nanjing/main.ts',
template: 'nanjing.html',
},
]
}
export default defineConfig({
base: './', // 方便打包后預覽
publicDir: 'public', // 默認 public
plugins: [vue(), createHtmlPlugin(htmlParams)],
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
}
},
build: {
cssCodeSplit: true,
emptyOutDir: true,
sourcemap: false,
assetsDir: 'assets', // 默認 assets
outDir: 'dist', // 默認 dist
rollupOptions: {
input: {}, // input 不用管，插件內(nèi)會處理
output: {
compact: true,
entryFileNames: "static/js/[name]-[hash].js",
chunkFileNames: "static/js/[name]-[hash].js",
assetFileNames: "static/[ext]/[name].[ext]",
}
}
}
})
項目里面，引入文件："../assets/vue.svg"、"../components/HelloWorld.vue" 改為 "@/assets/vue.svg"、"@/components/HelloWorld.vue"文章來源地址http://www.zghlxwxcb.cn/news/detail-497747.html
到了這里，關(guān)于vue3 + vite 多項目多模塊打包的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
