From a2046cc0dd93f97dfaccc2ed79c0617c0451def1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=98chen=2Ehome=E2=80=99?= <1147347984@qq.com> Date: Fri, 5 Aug 2022 23:04:04 +0800 Subject: [PATCH] =?UTF-8?q?chore(projects):=20=E5=A2=9E=E5=8A=A0jsx?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=92=8C=E6=9E=84=E5=BB=BAcompress?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env.production | 5 +++++ build/config/proxy.ts | 10 +++++++--- build/index.ts | 2 ++ build/plugins/compress.ts | 10 ++++++++++ build/plugins/index.ts | 17 +++++++++++++++++ build/plugins/vue.ts | 6 ++++++ package.json | 2 ++ tsconfig.json | 6 +++++- vite.config.ts | 12 ++++++------ 9 files changed, 60 insertions(+), 10 deletions(-) create mode 100644 build/plugins/compress.ts create mode 100644 build/plugins/vue.ts diff --git a/.env.production b/.env.production index e69de29..8b0b652 100644 --- a/.env.production +++ b/.env.production @@ -0,0 +1,5 @@ +# 是否开启压缩资源 +VITE_COMPRESS_OPEN=N + +# gzip | brotliCompress | deflate | deflateRaw +VITE_COMPRESS_TYPE=gzip \ No newline at end of file diff --git a/build/config/proxy.ts b/build/config/proxy.ts index 66976da..6b35dee 100644 --- a/build/config/proxy.ts +++ b/build/config/proxy.ts @@ -23,12 +23,16 @@ const serviceEnv = { }, }; -export function createViteProxy(env) { +/** + * @description: 生成vite代理字段 + * @param {*} viteEnv - 环境变量配置 + */ +export function createViteProxy(viteEnv) { //判断是否需要开启代理 - const isOpenProxy = env.VITE_HTTP_PROXY === 'Y'; + const isOpenProxy = viteEnv.VITE_HTTP_PROXY === 'Y'; if (!isOpenProxy) return undefined; // 返回对应代理 - const { VITE_SERVICE_ENV = 'dev' } = env; + const { VITE_SERVICE_ENV = 'dev' } = viteEnv; return serviceEnv[VITE_SERVICE_ENV]; } diff --git a/build/index.ts b/build/index.ts index f03c228..0e89ce2 100644 --- a/build/index.ts +++ b/build/index.ts @@ -1 +1,3 @@ export * from './config'; +export * from './plugins'; +// export * from './utils'; diff --git a/build/plugins/compress.ts b/build/plugins/compress.ts new file mode 100644 index 0000000..678cfc7 --- /dev/null +++ b/build/plugins/compress.ts @@ -0,0 +1,10 @@ +import viteCompression from 'vite-plugin-compression'; //https://github.com/vbenjs/vite-plugin-compression/blob/main/README.zh_CN.md + +export default (viteEnv) => { + // 默认使用gzip压缩 + const { VITE_COMPRESS_TYPE = 'gzip' } = viteEnv; + + return viteCompression({ + algorithm: VITE_COMPRESS_TYPE, // 压缩算法 + }); +}; diff --git a/build/plugins/index.ts b/build/plugins/index.ts index e69de29..e3639d5 100644 --- a/build/plugins/index.ts +++ b/build/plugins/index.ts @@ -0,0 +1,17 @@ +import vue from './vue'; +import compress from './compress'; + +/** + * @description: 设置vite插件配置 + * @param {*} viteEnv - 环境变量配置 + * @return {*} + */ +export function setVitePlugins(viteEnv) { + const plugins = [...vue]; + + if (viteEnv.VITE_COMPRESS_OPEN === 'Y') { + plugins.push(compress(viteEnv)); + } + + return plugins; +} diff --git a/build/plugins/vue.ts b/build/plugins/vue.ts new file mode 100644 index 0000000..b558134 --- /dev/null +++ b/build/plugins/vue.ts @@ -0,0 +1,6 @@ +import vue from '@vitejs/plugin-vue'; +import vueJsx from '@vitejs/plugin-vue-jsx'; // https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx + +const plugins = [vue(), vueJsx()]; + +export default plugins; diff --git a/package.json b/package.json index 5e2a029..0ef7428 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@typescript-eslint/eslint-plugin": "^5.32.0", "@typescript-eslint/parser": "^5.32.0", "@vitejs/plugin-vue": "^3.0.0", + "@vitejs/plugin-vue-jsx": "^2.0.0", "@vue/eslint-config-prettier": "^7.0.0", "@vue/eslint-config-typescript": "^11.0.0", "commitizen": "^4.2.5", @@ -49,6 +50,7 @@ "prettier": "^2.7.1", "typescript": "^4.6.4", "vite": "^3.0.0", + "vite-plugin-compression": "^0.5.1", "vue-tsc": "^0.38.4" } } diff --git a/tsconfig.json b/tsconfig.json index 2d44621..6be9216 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,7 +11,11 @@ "isolatedModules": true, "esModuleInterop": true, "lib": ["ESNext", "DOM"], - "skipLibCheck": true + "skipLibCheck": true, + "paths": { + "~/*": ["./*"], + "@/*": ["./src/*"] + } }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] } diff --git a/vite.config.ts b/vite.config.ts index 9837502..59d2f76 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,6 +1,5 @@ import { defineConfig, loadEnv, ConfigEnv } from 'vite'; -import { createViteProxy } from './build'; -import vue from '@vitejs/plugin-vue'; +import { createViteProxy, setVitePlugins } from './build'; import { resolve } from 'path'; // 当前执行node命令时文件夹的地址（工作目录） @@ -13,10 +12,11 @@ export default defineConfig(({ command, mode }: ConfigEnv) => { // 根据当前工作目录中的 `mode` 加载 .env 文件 // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。 - const env = loadEnv(mode, process.cwd(), ''); + const viteEnv = loadEnv(mode, process.cwd(), ''); + return { - base: env.VITE_BASE_URL, - plugins: [vue()], + base: viteEnv.VITE_BASE_URL, + plugins: setVitePlugins(viteEnv), resolve: { alias: { '~': rootPath, @@ -27,7 +27,7 @@ export default defineConfig(({ command, mode }: ConfigEnv) => { host: '0.0.0.0', port: 5200, open: false, - proxy: createViteProxy(env), + proxy: createViteProxy(viteEnv), }, preview: { port: 5211,