Vite+Vue下的多页面入口配置

百家饭AI

已于 2023-04-26 18:01:41 修改

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2023-04-26 17:56:20 首次发布

本文链接：https://blog.youkuaiyun.com/baijiafan/article/details/130391167

文章介绍了如何在Vite项目中配置多页面入口，通过修改vite.config.js中的build.rollupOptions.input，添加不同的入口文件路径。对于非index.html文件，访问时需使用完整文件名。同时，如果开启history模式的vue-route，错误配置可能导致访问问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我发现多页面入口配置在网上的资料比较乱，今天正好结合我们的开源API分析工具项目（APIcat）更新情况总结一下。

更新vite.config.js

主要配置的更新是在vite.config.js里面要增加build里的rollupOptions，因为vite底层使用了rollup，实际要更改的是他的配置，为rollupOptions增加多个input属性，

官方文档地址为：https://rollupjs.org/configuration-options/#input

推荐配置为map，比如我们有report和detect两个入口，则分别配置如下：

 build: {
    rollupOptions: {
      input: {
        report: fileURLToPath(new URL('./report/index.html', import.meta.url)),
        detect: fileURLToPath(new URL('./detect/index.html', import.meta.url)),
      },
    },
  },

具体的值不用在意，能解析到即可。比如我另外一个项目配置为：

  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        get: resolve(__dirname, 'page/get.html'),
        apihome: resolve(__dirname, 'api/home.html'),
      },
    },
  },

其实配置很简单，但是调试的时候要注意一些问题：

如果文件是index.html，访问的时候可以使用目录名称访问，比如我的report入口，就可以使用http://localhost:5173/report/访问，注意：最后面的/是必须要的。

如果文件不是index.html，而是其他名称，则必须使用完整文件名称访问，省略.html都不行。

如果犯了上面两个错误，恰好还有一个根入口，又启动了history模式的vue-route，上面的问题特别容易造成配置不成功的假象，因为这时，会默认使用根入口渲染，并将多余url作为vue-route参数。