最近有多页面项目需要重构，就想试试使用vite，但是网上很多方法不太全面踩了不少的坑，网上的多页面配置方案也不少，我只给出了我成功配置并在使用的方案
目录结构
{
dist: // 存放打包后的文件,
node_modules: ,
src: {
assets: // 一些静态文件,
components: // 公用组件,
index: { // 页面1
index.html,
main.js,
App.vue,
...
},
page: { // 页面2
index.html,
main.js,
App.vue,
...
},
...
index.html // 用于页面初始进入时重定向
},
package.json: ,
vite.config.js: // 配置文件
}Tips：在src中放一个index.html是为了编译或打包后，输入localhost:3000/能够直接跳转到需要展示的页面，而不是出现文件目录或空白页面，对应代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vite多页面</title>
</head>
<body>
<script>
window.location.href = 'https://www.atool.online/article/index/index.html' // 需要重定向的页面
</script>
</body>
</html>
多页面使用时，vite配置项中注意点
- 修改root参数为多页面的根目录：./src/，根据不同目录结构而修改
- 配置base参数为/，不然打包后js文件的访问路径会出问题
- 将build.outDir原输入路径dist改为../dist，根据root参数配置层级不同而对应修改
- rollupOptions.input中配置多个页面的输入，以下为我使用的配置项
{
admin: path.resolve(__dirname, 'src/index.html'), // 用于页面重定向
index: path.resolve(__dirname, 'src/index/index.html'), // 页面一
page: path.resolve(__dirname, 'src/page/index.html'), // 页面二
}
vite.config.js 配置，仅供参考
直接上我的配置，东西有点多，仅供参考
import {
defineConfig
} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
// 服务
server: {
// 服务器主机名
host: '0.0.0.0',
// 端口号
port: 3000,
// 设为 true 时若端口已被占用则会直接退出，
// 而不是尝试下移一格端口
strictPort: false,
// http.createServer() 配置项
// https: '',
proxy: {
'/api': {
target: 'http://...............',
changeOrigin: true,
rewrite: (path) => {
return path.replace(/^\/api/, '')
}
}
},
// 开发服务器配置 CORS
// boolean | CorsOptions
cors: {},
// 设置为 true 强制使依赖构建
// force: true,
// 禁用或配置HMR连接
hmr: {},
// 传递给 chokidar 的文件系统监视器选项
watch: {}
},
// 项目根目录
// root: process.cwd(),
root: './src/',
// 项目部署的基础路径
base: '/',
// 环境配置
mode: 'development',
// 全局变量替换 Record<string, string>
define: {},
// 插件
plugins: [vue()],
// 静态资源服务文件夹
publicDir: 'public',
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'components': path.resolve(__dirname, 'src/components')
},
dedupe: [],
// 情景导出package.json 配置中的 exports 字段
conditions: [],
// 解析package.json 中的字段
mainFields: ['module', 'jsnext:main', 'jsnext'],
// 导入时想要省略的扩展名列表
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
},
css: {
// 配置css modules 的行为， 选项被传递给postcss-modules
modules: {},
// PostCSS 配置（格式同postcss.config.js）
// postcss-load-config 的插件配置
postcss: {},
// 指定传递给 CSS 预处理器的选项
preprocessorOptions: {
}
},
json: {
// 是否支持从 .json 文件中进行按名导入
namedExports: true,
// 若设置为 true, 导入的 JSON 会被转换为 export default JSON.parse("...") 会比转译成对象字面量性能更好
// 尤其是当 JSON 文件较大时
// 开启此项， 则会禁用按名导入
stringify: false
},
// 继承自 esbuild 转换选项， 最常见的用例是自定义 JSX
esbuild: {
jsxFactory: 'h',
jsxFragment: 'Fragment',
jsxInject: `import React from 'react'`
},
// 静态资源处理 字符串 || 正则表达式
assetsInclude: '',
// 调整控制台输出的级别 'info' | 'warn' | 'error' | 'silent'
logLevel: 'info',
// 设为 false 可以避免 Vite 清屏而错过在终端中打印某些关键信息
clearScreen: true,
build: {
// 浏览器兼容性 ‘esnext' | 'modules'
target: 'modules',
//输出路径
outDir: '../dist',
// 生成静态资源的存放路径
assetsDir: '../assets',
// 小于此阈值的导入或引用资源将内联为 base64 编码， 以避免额外的http请求， 设置为 0, 可以完全禁用此项，
assetsInlineLimit: 4096,
// 启动 / 禁用 CSS 代码拆分
cssCodeSplit: true,
// 构建后是否生成 soutrce map 文件
sourcemap: false,
// 自定义底层的 Rollup 打包配置
rollupOptions: {
input: {
admin: path.resolve(__dirname, 'src/index.html'),
page: path.resolve(__dirname, 'src/page/index.html'),
index: path.resolve(__dirname, 'src/index/index.html'),
},
output: {
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
}
},
// @rollup/plugin-commonjs 插件的选项
commonjsOptions: {},
// 构建的库
// lib: { entry: string, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string },
// 当设置为 true, 构建后将会生成 manifest.json 文件
manifest: false,
// 设置为 false 可以禁用最小化混淆
// 或是用来指定是应用哪种混淆器
// boolean | 'terser' | 'esbuild'
minify: 'terser',
// 传递给 Terser 的更多 minify 选项
terserOptions: {},
// 设置为false 来禁用将构建好的文件写入磁盘
write: true,
// 默认情况下 若 outDir 在 root 目录下， 则 Vite 会在构建时清空该目录。
emptyOutDir: true,
// 启用 / 禁用 brotli 压缩大小报告
brotliSize: false,
// chunk 大小警告的限制
chunkSizeWarningLimit: 500
}
})
访问
页面一：http://localhost:3000/index/index.html
页面二：http://localhost:3000/page/index.html
总结
到此这篇关于vite多页面配置的文章就介绍到这了,更多相关vite多页面配置内容请搜索阿兔在线工具以前的文章或继续浏览下面的相关文章希望大家以后多多支持阿兔在线工具！
