• Home
  • home > tools > Bundler > vite >

    vite多页面应用模式配置：multi pages config 踩坑

    Author：zhoulujun Date：

    vite官方对多页面配置讲的还是不够详细，如何在工程上对多页面配置进行优化呢？而且打包配置输出是符合曾经过往的webpack习惯呢？

    记得之前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

    收藏
    上一篇：Bundler取舍：抛弃vite改投rspack？
    下一篇：最后一页
    TOP