vite+Vue3 配置多页面打包
1. 在src同级目录新建要打包的文件目录
./
├── jsconfig.json
├── CrawlerHome
├── CrawlerScheduled
├── CrawlerTaskList
├── README.md
├── dist
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── src
├── tailwind.config.js
└── vite.config.js
2. 在新建的文件目录添加 index.html,index.js
./CrawlerHome
├── index.html
└── index.js
index.html
拷贝public下面的index.html 文件，修改
<script type="module" src="/CrawlerHome/index.js"></script>
<!DOCTYPE html>
<html lang="en">
<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>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/CrawlerHome/index.js"></script>
</body>
</html>
index.js
import App from '../src/views/Home/StatisticsPage/StatisticsPage.vue'
这里修改为你要单独拎出来打包的页面
上面引用的库如果不需要都可以删除。
import { createApp } from 'vue'
import 'normalize.css'
import '../src/style.css'
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import 'virtual:svg-icons-register'
import App from '../src/views/Home/StatisticsPage/StatisticsPage.vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(ElementPlus)
app.mount('#app')
3. 修改配置文件 vite.config.js
vite.config.js 里面的 build 选项，同时 设置 ` base: ‘./’,`
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'url'
import path from 'path'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
base: './',
plugins: [
vue(),
createSvgIconsPlugin({
// Specify the icon folder to be cached
iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
// Specify symbolId format
symbolId: 'icon-[dir]-[name]'
})
],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
// extensions: ['.js', '.json', '.ts'] // 使用路径别名时想要省略的后缀名，可以自己 增减
},
build: {
rollupOptions: {
input: {
// 配置所有页面路径，使得所有页面都会被打包
main: path.resolve(__dirname, 'index.html'),
crawlerHome: path.resolve(__dirname, 'CrawlerHome/index.html')
}
}
}
})
4. 打包
` npm run build`
./dist
├── CrawlerHome
│ └── index.html
├── assets
│ ├── 404-67a7dbba.js
│ ├── NodeList-059233b2.css
│ ├── NodeList-f2f326ef.js
│ ├── StatisticsPage-3ae3f910.js
│ ├── StatisticsPage-4c4db04c.css
│ ├── crawlerHome-63008e06.js
│ ├── index-c5d22557.css
│ ├── main-3bdde903.js
│ ├── virtual_svg-icons-register-24bf6519.css
│ └── virtual_svg-icons-register-33f9827d.js
├── index.html
└── vite.svg
