vite多页面应用模式配置：multi pages config 踩坑
Author：zhoulujun Date：
记得之前vite1-2版本支持多页面需要第三方插件。
现在接手的项目vite6了，貌似vite5 就原生支持多页面配置，官方文档如下：
https://cn.vite.dev/guide/build#multi-page-app
多页面应用模式
官方给的貌似很详细
├── package.json ├── vite.config.js ├── index.html ├── main.js └── nested ├── index.html └── nested.js
增加一个页面入口
import { resolve } from 'path'
import { defineConfig } from 'vite'
export default defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
nested: resolve(__dirname, 'nested/index.html'),
},
},
},
})这样，就可以直接访问/nested/ /nested/html页面了。
但是，按照webpack的过往习惯，js/ts 入口一般放在src目录地下，不同html一般和index.html 平级，取不同名字。
dist -assets -index.html -nested.html
或者在放在pages目录下
而且，按照这个配置，输出不理想。
其是，我们只需复制工程目录里面的index.html，改为不nest.html
然后改nest.html 的入口文件即可
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title></title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script type="module" src="/src/pages/nested/main.tsx"></script> </body> </html>
然后把vite config 配置文件的里面input入口也改了即可
我一般采用这种做法。
参考文章：
真正优雅的vite多页面实战 https://juejin.cn/post/7128999848564981796
转载本站文章《vite多页面应用模式配置：multi pages config 踩坑》,
请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/vite/9419.html
下一篇：最后一页