配置文件
// 类型提示
import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
// config
export default defineConfig({
// 生产或开发环境下的基础路径
base: '/',
// 需要用到的插件数组
plugins: [vue()],
// 静态资源服务目录地址
publicDir: resolve(__dirname, 'public'),
// 存储缓存文件的目录地址
cacheDir: '',
//
resolve: {
// 设置文件目录别名
alias: {
'@': '.',
},
//
},
//
css: {
// postcss-modules 行为配置
modules: {
// ...
},
// 传递给css预处理器的配置项
preprocessorOptions: {
// 指定less预处理的配置项
less: {
// ...
},
},
},
// esbuild 选项转换配置
esbuild: {
// ...
// 在react组件中无需导入react
// jsxInject: `import React from 'react'`,
// vue 使用jsx
jsxFactory: 'h',
jsxFragment: 'Fragment',
},
// 静态资源处理
assetsInclude: '',
// 开发服务器选项
server: {
// 项目启动后自动打开浏览器
},
// 构建配置项
build: {
modulePreload: { //https://cn.vitejs.dev/config/build-options.html
polyfill: false,
},
// 指定输出目录
outDir: resolve(__dirname, 'dist'),
// 指定静态资源存放目录
assetsDir: 'assets',
// 启用、禁用css代码拆分
cssCodeSplit: true,
// 构建是否生成source map文件
sourcemap: false,
// rollup 配置打包项
rollupOptions: {
input: {
index: 'index.html',
login: 'login.html',
register: 'register.html',
},
output: {
chunkFileNames: 'static/[name]/js/[name]-[hash].js',
entryFileNames: 'static/[name]/js/[name]-[hash].js',
assetFileNames: 'static/[name]/[ext]/[name]-[hash].[ext]',
// manualChunks(id) {
// //静态资源分拆打包
// if (id.includes('node_modules')) {
// return id.toString().split('node_modules/')[1].split('/')[0].toString()
// }
// }
}
},
// 构建目录自动清除
emptyOutDir: true,
target: 'modules',
},
// 依赖优化配置项
optimizeDeps: {
// 依赖构建入口
entries: '',
// 排除不需要构建的依赖项
exclude: [],
},
})
目录结构
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>login</title>
</head>
<body>
<div id="app">登录页</div>
<script type="module" src="./src/pages/login/index.ts"></script>
</body>
</html>
打包目录
App.vue
<template>
<div>
<h3><a href="/login.html">login</a></h3>
<h3><a href="/register.html">register</a></h3>
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped></style>
页面显示效果
点击跳转
ok！
gitee gitee.com/huang-yuhan…
