通過配置多頁面應(yīng)用斜纪，從而將給子模塊依賴分隔開各自加載，可以減少初始資源請(qǐng)求衍锚，加快訪問速度瓜饥。
比如將登錄頁單獨(dú)做配置，通過/login/進(jìn)行訪問冷溃，不需要初始資源的加載支持钱磅。
修改vite.config.js
vite.config.js 變更
最主要的就是root配置變更，更改為src目錄似枕，此處可進(jìn)行多模塊管理盖淡，比如項(xiàng)目中的 login
<b> __dirname 是vite.config.js所在的目錄。<b>
如果不變更 root 配置凿歼，繼續(xù)以項(xiàng)目根目錄進(jìn)行多頁配置褪迟，無法跳轉(zhuǎn)到其他頁面
root 根目錄變更后，需要注意的點(diǎn)
publicDir配置答憔，原來是項(xiàng)目目錄下的public味赃，root 變更后，則需要重新指定虐拓，resolve(__dirname,'./public')alias通常會(huì)配置目錄別名心俗，以前./src指向 src 目錄，現(xiàn)在 root 變更，需要手動(dòng)指定resolve(__dirname,'./src'),不然原有資源加載不到outDir配置編譯存放的目錄城榛，默認(rèn)dist, 變更了 root揪利，不指定就會(huì)存放在src/dist下。-
input為 rollupOptions rollup 配置狠持，定義入口疟位、出口及其他參數(shù)。build: { // ... // 指定輸出目錄 outDir: resolve(__dirname,'dist'), // rollup 配置打包項(xiàng) rollupOptions: { // ... // input:"src/index.js" input: { main: resolve(__dirname, 'src/index.html'), login: resolve(__dirname, 'src/login/index.html') } },
- 訪問 public 資源目錄地址變更喘垂，以前是
/public/img/**甜刻，現(xiàn)在直接指向二級(jí)目錄地址/img/**
此處展示調(diào)整過的配置，其他配置不在贅述王污，可查看項(xiàng)目地址
// ...
// config
export default defineConfig(({ command, mode }) => {
/**
* command - 命令模式
* mode - 生產(chǎn)罢吃、開發(fā)模式
*/
return {
const { resolve } = require('path')
// 項(xiàng)目根目錄，index.html 所在的目錄
// 要配置多頁面昭齐，所以此處更改項(xiàng)目根目錄地址尿招，不再是項(xiàng)目根目錄
// 而是指定的目錄下， 以便配置多頁面index.html入口
root: resolve(__dirname,'src'),
// 靜態(tài)資源服務(wù)目錄地址
// 根目錄變化阱驾，原來的public靜態(tài)資源目錄則需要就谜，指向
publicDir: resolve(__dirname,'./public'),
// 存儲(chǔ)緩存文件的目錄地址
cacheDir: '',
//
resolve: {
// 設(shè)置文件目錄別名
// 根目錄地址變更，也需要調(diào)整
alias: {
'@': resolve(__dirname,'./src'),
},
},
// ...
// 構(gòu)建配置項(xiàng)
build: {
// ...
// 指定輸出目錄
outDir: resolve(__dirname,'dist'),
// 指定靜態(tài)資源存放目錄
assetsDir: '',
// 啟用里覆、禁用css代碼拆分
cssCodeSplit: true,
// 構(gòu)建是否生成source map文件
sourcemap: 'inline',
// rollup 配置打包項(xiàng)
rollupOptions: {
// ...
// input:"src/index.js"
input: {
main: resolve(__dirname, 'src/index.html'),
login: resolve(__dirname, 'src/login/index.html')
}
},
// 構(gòu)建目錄自動(dòng)清除
emptyOutDir: false,
},
}
})
不變更root
如果可以不變更 root丧荐，那我們需要更改的配置也比較少，只需要調(diào)整input就可以了
build: {
// rollup 配置打包項(xiàng)
rollupOptions: {
// ...
// input:"src/index.js"
input: {
main: resolve(__dirname, 'src/index.html'),
login: resolve(__dirname, 'src/login/index.html')
}
},
},
但是測(cè)試多次喧枷，都無法跳轉(zhuǎn)到配置的登錄頁虹统。
遂作罷！Ｋ砩酢车荔！
訪問登錄頁地址http://127.0.0.1:8081/login/
登錄成功后 http://127.0.0.1:8081 就可以正常范文項(xiàng)目了
vite+vue3 模板代碼倉(cāng)庫(kù)(vite-vue3)[https://gitee.com/ngd_b/vue3-vite]
其他文章：
