多页面应用简单构建"/>
Vite多页面应用简单构建
来自于官网
构建生产版本 | Vite 官方中文文档 (vitejs.dev)
假设你有下面这样的项目文件结构
├── package.json
├── vite.config.js
├── index.html
├── main.js
└── nested├── index.html└── nested.js
在开发过程中,简单地导航或链接到 /nested/
- 将会按预期工作,与正常的静态文件服务器表现一致。
在构建过程中,你只需指定多个 .html
文件作为入口点即可:
js
// vite.config.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'),},},},
})
如果你指定了另一个根目录,请记住,在解析输入路径时,__dirname
的值将仍然是 vite.config.js 文件所在的目录。因此,你需要把对应入口文件的 root
的路径添加到 resolve
的参数中。
请注意,在 HTML 文件中,Vite 忽略了 rollupOptions.input
对象中给定的入口名称,而是在生成 dist 文件夹中的 HTML 资源文件时,使用了文件已解析的路径 ID。这确保了与开发服务器的工作方式保持一致的结构。
参考
vue3-ts-vite:vue 项目 配置 多页面应用_vue3多页面应用_snowball_li的博客-CSDN博客
更多推荐
Vite多页面应用简单构建
发布评论