chore: 初始化项目基础结构和资源文件
- 添加项目图标文件（app-icon.png、各平台图标） - 配置开发环境文件（.env、.nvmrc、.npmrc） - 添加静态资源文件（背景图片、字体、音频） - 初始化Tauri后端结构（build.rs、main.rs、模块文件） - 配置前端项目结构（TypeScript、Vue组件、样式） - 添加Node.js API服务基础结构 - 配置构建和开发工具（vite、prettier、gitignore）
This commit is contained in:
155
vite.config.ts
Normal file
155
vite.config.ts
Normal file
@ -0,0 +1,155 @@
|
||||
import { type ConfigEnv, type UserConfig, defineConfig } from 'vite';
|
||||
import Vue from '@vitejs/plugin-vue';
|
||||
import { author, copyright } from './package.json';
|
||||
import Banner from 'vite-plugin-banner';
|
||||
import Components from 'unplugin-vue-components/vite';
|
||||
import AutoImport from 'unplugin-auto-import/vite';
|
||||
import Icons from 'unplugin-icons/vite';
|
||||
import IconsResolver from 'unplugin-icons/resolver';
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
|
||||
import { resolve } from 'node:path';
|
||||
import VueDevTools from 'vite-plugin-vue-devtools';
|
||||
import { cssOption } from './vite/cssOption';
|
||||
import { rolldownOptions } from './vite/rolldownOptions';
|
||||
import { useViteCompression } from './vite/compression';
|
||||
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
|
||||
import { elementPlusStyleOptimizeIncludes, optimizeIncludes } from './vite/optimizeDeps';
|
||||
import dayjs from 'dayjs';
|
||||
import { getPrivateConfig } from './vite/private-config';
|
||||
import { viteImageminOption } from './vite/viteImageminOption';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const host = process.env.TAURI_DEV_HOST;
|
||||
// 得到个人配置
|
||||
const privateConfig = getPrivateConfig();
|
||||
// 添加环境变量
|
||||
process.env.VITE_DEVICE_ID = privateConfig.deviceID;
|
||||
|
||||
export default defineConfig(async ({ command }: ConfigEnv): Promise<UserConfig> => {
|
||||
/** elementPlus导入的样式是css还是scss */
|
||||
const elementPlusStyleType: 'css' | 'scss' = 'scss';
|
||||
/** 是不是生产环境(预览环境也不是生产环境) */
|
||||
const isBuild = Boolean(command === 'build');
|
||||
/** 需要预构建的依赖 */
|
||||
const optimize: string[] = ['mitt', 'element-plus', 'element-plus/es', 'echarts', 'axios', 'simple-keyboard', '@element-plus/icons-vue'];
|
||||
|
||||
const config: UserConfig = {
|
||||
base: './', // 基础路径
|
||||
|
||||
plugins: [
|
||||
VueDevTools({
|
||||
appendTo: 'index.html',
|
||||
}),
|
||||
|
||||
Vue({}),
|
||||
// 自动导入API
|
||||
AutoImport({
|
||||
dirs: ['./vite/auto-import', './src/pinia/modules'], // 自动导入目录下的模块导出
|
||||
imports: ['vue', 'vue-router'],
|
||||
vueTemplate: true, // Vue模板内自动导入
|
||||
dts: './src/types/auto-imports.d.ts', // 当本项目安装 typescript 时是否 生成相应的 .d.ts 文件 [支持自定义路径] 当设置为true时，默认生成文件到'./auto-imports.d.ts'中
|
||||
resolvers: [
|
||||
// // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
|
||||
ElementPlusResolver({ importStyle: elementPlusStyleType === 'scss' ? 'sass' : 'css' }),
|
||||
],
|
||||
}),
|
||||
// 自动注册组件
|
||||
Components({
|
||||
resolvers: [
|
||||
// 自动导入 Element Plus 组件
|
||||
ElementPlusResolver({ importStyle: elementPlusStyleType === 'scss' ? 'sass' : 'css' }),
|
||||
// 自动注册图标组件
|
||||
IconsResolver({
|
||||
enabledCollections: ['solar', 'pepicons-pencil', 'ph', 'mdi', 'line-md', 'hugeicons', 'lucide', 'fluent', 'streamline-ultimate', 'ep'],
|
||||
customCollections: ['my'],
|
||||
}),
|
||||
],
|
||||
dts: './src/types/components.d.ts',
|
||||
}),
|
||||
// 注册 svgIcon
|
||||
Icons({
|
||||
autoInstall: true,
|
||||
compiler: 'vue3',
|
||||
customCollections: { my: FileSystemIconLoader(resolve(__dirname, 'src/assets/svg-icons/unplugin-icons')) },
|
||||
}),
|
||||
// 压缩
|
||||
useViteCompression(isBuild),
|
||||
],
|
||||
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||
},
|
||||
},
|
||||
|
||||
css: cssOption(elementPlusStyleType), // css配置
|
||||
// 预构建
|
||||
optimizeDeps: {
|
||||
// 需要预构建的依赖
|
||||
include: isBuild ? [] : [...(await optimizeIncludes(optimize)), ...(await elementPlusStyleOptimizeIncludes(elementPlusStyleType))],
|
||||
},
|
||||
server: {
|
||||
open: false, // 是否自动打开浏览器
|
||||
port: 4266, // 开发服务器端口，与Tauri配置一致
|
||||
strictPort: true, // 设为 true 时若端口已被占用则会直接退出,而不是尝试下一个可用端口。
|
||||
cors: true, // 为开发服务器配置 CORS。默认启用并允许任何源
|
||||
host: host || false,
|
||||
hmr: host ? { protocol: 'ws', host, port: 1421 } : undefined,
|
||||
watch: {
|
||||
// 告诉 Vite 忽略监视 `src-tauri` 目录
|
||||
ignored: ['**/src-tauri/**'],
|
||||
},
|
||||
// 开发时支持访问所有 HTML 入口
|
||||
fs: {
|
||||
allow: ['.'],
|
||||
},
|
||||
},
|
||||
define: {
|
||||
__APP_VERSION_TIMESTAMP__: JSON.stringify(new Date().getTime()), // 编译时间
|
||||
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
|
||||
},
|
||||
|
||||
// 防止 vite 遮挡掉 rust 语言中的错误信息
|
||||
clearScreen: false,
|
||||
// 以 `envPrefix` 项开头的环境变量将通过 `import.meta.env` 在 Tauri 的源代码中公开。
|
||||
envPrefix: ['VITE_', 'TAURI_ENV_*'],
|
||||
build: {
|
||||
outDir: 'dist', // 设置Web部分输出目录
|
||||
cssCodeSplit: true, // 启用/禁用 CSS 代码拆分。当启用时,在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身,并在其被加载时插入。 如果禁用,整个项目中的所有 CSS 将被提取到一个 CSS 文件中。
|
||||
target: process.env.TAURI_ENV_PLATFORM === 'windows' ? 'chrome105' : 'safari14', // 设置最终构建的浏览器兼容目标。使用标准 ES 版本代替 Vite 特有的 'modules'
|
||||
chunkSizeWarningLimit: 1150, // 单位kb 打包后文件大小警告的限制 (文件大于此此值会出现警告)
|
||||
assetsInlineLimit: 4096, // 单位字节(1024等于1kb) 小于此阈值的导入或引用资源将内联为 base64 编码,以避免额外的 http 请求。设置为 0 可以完全禁用此项。
|
||||
minify: !process.env.TAURI_ENV_DEBUG ? 'oxc' : false,
|
||||
reportCompressedSize: false, // 启用/禁用 gzip 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能。
|
||||
// 在 debug 构建中生成 sourcemap
|
||||
sourcemap: Boolean(process.env.TAURI_ENV_DEBUG),
|
||||
rolldownOptions: {
|
||||
...rolldownOptions(),
|
||||
// 生产环境只构建主入口，开发环境构建所有入口以支持多窗口
|
||||
input: isBuild
|
||||
? {
|
||||
main: resolve(__dirname, 'index.html'),
|
||||
}
|
||||
: {
|
||||
main: resolve(__dirname, 'index.html'),
|
||||
'floating-list-window': resolve(__dirname, 'floating-list-window.html'),
|
||||
'popup-window': resolve(__dirname, 'popup-window.html'),
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
if (isBuild) {
|
||||
/** 添加版权信息 */
|
||||
const tannerText = `/**
|
||||
* 版权: ${copyright}
|
||||
* 作者: ${author}
|
||||
* 日期: ${dayjs().format('YYYY年MM月DD日')}
|
||||
*/`;
|
||||
config.plugins?.push(Banner(tannerText));
|
||||
// 打包自动压缩图片
|
||||
config.plugins?.push(viteImageminOption());
|
||||
}
|
||||
|
||||
return Promise.resolve(config);
|
||||
});
|
||||
Reference in New Issue
Block a user