ViteはマルチページAppに対応しているので、複数ページの設定を調査した
Building for Production | Vite
マルチページAppとは上の図にあるように/だけではなく、/nest/というページがあるようなアプリケーション
やりかたはvite.config.jsのrollupOptions.inputにエントリーポイントとして複数の.htmlファイルを指定するだけとある
const { resolve } = require('path')
const { defineConfig } = require('vite')
module.exports = defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
nested: resolve(__dirname, 'nested/index.html')
}
}
}
})
ただ、前回やりたかった出力されるJSファイル名変更もやる場合は、もう少し工夫が必要
【Vite】ビルドして出力されるファイル名を変えたい - UGA Boxxx
前回のままだと/assets/bundle.jsが２つ（正確には、bundle.jsとbundle2.js）ができてしまったので、設定値を変える
[name]というプレースホルダーを使えば、エントリポイントにオブジェクトでない場合はエントリポイントのファイル名（拡張子なし）が埋め込まれ、エントリポイントにオブジェクトが指定された場合はキー名が埋め込まれるらしいので使ってみる
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
nested: resolve(__dirname, 'nested/index.html')
},
output: {
entryFileNames: `assets/[name]/bundle.js`,
}
}
}
})
するとassets/main/bundle.jsとassets/nested/bundle.jsの２つが出力された
ただ、assets/main/bundle.jsはassets/bundle.jsにしたい
いろいろ試行錯誤した結果、src/pagesを用意してそこをプロジェクトルートにした
そして、src/pages配下にサブディレクトリをつくっていく
こんな感じ
├── src
│ ├── assets
│ │ └── logo.png
│ ├── components
│ │ └── HelloWorld.vue
│ ├── env.d.ts
│ └── pages
│ ├── index.html
│ ├── App.vue
│ ├── app.ts
│ ├── nested
│ │ ├── App.vue
│ │ ├── app.ts
│ │ └── index.html
│ └── nested2
│ ├── App.vue
│ ├── app.ts
│ └── index.html
vite.config.jsは結果的にこうなった
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
export default defineConfig({
root: 'src/pages',
plugins: [vue()],
publicDir: resolve(__dirname, 'public'),
build: {
outDir: resolve(__dirname, 'dist'),
emptyOutDir: true,
rollupOptions: {
input: {
'': resolve(__dirname, 'src/pages/index.html'),
'nested': resolve(__dirname, 'src/pages/nested/index.html'),
'nested2': resolve(__dirname, 'src/pages/nested2/index.html')
},
output: {
entryFileNames: `assets/[name]/bundle.js`,
assetFileNames: (assetInfo) => {
if (assetInfo.name === '.css') {
return 'assets/index.css'
}
return `assets/[name].[ext]`
},
chunkFileNames: `assets/[name].js`,
}
}
}
})
(1)ではsrc/pagesをプロジェクトルートにする
(2)では(1)によってpublicディレクトリの場所が見つからなくなってしまったので再定義している
(3)では(1)によって出力先のdistを明示的に定義している
(4)ではdistがプロジェクトルート外になってしまったため、ビルド時に自動でクリーンするので警告がでるようになった
falseを指定すると自動でクリーンされなくなるが、今回はしてほしいのでtrueにした
(5)がはまったところで、cssファイル名が[name].cssになるため、''をエントリーポイントのキーにしたプロパティでは.cssというファイルを出力してしまう
そこで、assetInfo.nameを使って、.cssの場合はindex.cssという名前をつけるようにした
これでいい感じに吐き出してくれるようになった
$ npm run build
> try-vite@0.0.0 build
> vue-tsc --noEmit && vite build
vite v2.9.8 building for production...
✓ 19 modules transformed.
Generated an empty chunk: "main"
../../dist/index.html 0.32 KiB
../../dist/nested/index.html 0.53 KiB
../../dist/nested2/index.html 0.53 KiB
../../dist/assets/bundle.js 0.25 KiB / gzip: 0.21 KiB
../../dist/assets/nested/bundle.js 0.25 KiB / gzip: 0.21 KiB
../../dist/assets/nested2/bundle.js 0.26 KiB / gzip: 0.21 KiB
../../dist/assets/index.css 0.17 KiB / gzip: 0.14 KiB
../../dist/assets/nested.css 0.17 KiB / gzip: 0.14 KiB
../../dist/assets/nested2.css 0.17 KiB / gzip: 0.14 KiB
