From 77ab7b39743e4ae3b7e6639f2a22e005a498643c Mon Sep 17 00:00:00 2001 From: wang_fan_w <2547096351@qq.com> Date: Mon, 25 Mar 2024 23:42:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=89=93=E5=8C=85=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E5=92=8C=E7=8E=AF=E5=A2=83=E5=8F=98=E9=87=8F=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 5 +++ .env.development | 5 +++ .env.production | 5 +++ package.json | 1 + pnpm-lock.yaml | 71 +++++++++++++++++++++++++++++++-- vite.config.ts | 100 +++++++++++++++++++++++++---------------------- 6 files changed, 137 insertions(+), 50 deletions(-) create mode 100644 .env create mode 100644 .env.development create mode 100644 .env.production diff --git a/.env b/.env new file mode 100644 index 0000000..8eca6aa --- /dev/null +++ b/.env @@ -0,0 +1,5 @@ +# 生产环境优先级 +# development & production > .env + +# 静态资源url +VITE_IMG_BASE_URL = 'https://my-image-cdn.com' \ No newline at end of file diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..a3ae4d4 --- /dev/null +++ b/.env.development @@ -0,0 +1,5 @@ +# 开发环境 +VITE_USER_NODE_ENV = development + +# 开发环境地址前缀 (一般 '/' 或 './' 都可以) +VITE_PUBLIC_PATH = '/' \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..0387852 --- /dev/null +++ b/.env.production @@ -0,0 +1,5 @@ +# 生产环境 +VITE_USER_NODE_ENV = production + +# 打包路径 (就是网站前缀, 例如部署到 http://dcodes.gitee.io/dc-admin/ 域名下, 就需要填写 /dc-admin/), 一般填一个斜杠 / +VITE_PUBLIC_PATH = '/dc-admin/' \ No newline at end of file diff --git a/package.json b/package.json index 4cec161..a6daf3c 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "prettier": "^3.2.5", "sass": "^1.72.0", "scss": "^0.2.4", + "terser": "^5.29.2", "typescript": "^5.2.2", "vite": "^5.2.0", "vite-plugin-svg-icons": "^2.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 698d90a..cb804cd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -73,12 +73,15 @@ devDependencies: scss: specifier: ^0.2.4 version: 0.2.4 + terser: + specifier: ^5.29.2 + version: 5.29.2 typescript: specifier: ^5.2.2 version: 5.4.3 vite: specifier: ^5.2.0 - version: 5.2.2(@types/node@20.11.30)(sass@1.72.0) + version: 5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2) vite-plugin-svg-icons: specifier: ^2.0.1 version: 2.0.1(vite@5.2.2) @@ -986,9 +989,42 @@ packages: resolution: {integrity: sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==} dev: true + /@jridgewell/gen-mapping@0.3.5: + resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==} + engines: {node: '>=6.0.0'} + dependencies: + '@jridgewell/set-array': 1.2.1 + '@jridgewell/sourcemap-codec': 1.4.15 + '@jridgewell/trace-mapping': 0.3.25 + dev: true + + /@jridgewell/resolve-uri@3.1.2: + resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} + engines: {node: '>=6.0.0'} + dev: true + + /@jridgewell/set-array@1.2.1: + resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==} + engines: {node: '>=6.0.0'} + dev: true + + /@jridgewell/source-map@0.3.6: + resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==} + dependencies: + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 + dev: true + /@jridgewell/sourcemap-codec@1.4.15: resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} + /@jridgewell/trace-mapping@0.3.25: + resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} + dependencies: + '@jridgewell/resolve-uri': 3.1.2 + '@jridgewell/sourcemap-codec': 1.4.15 + dev: true + /@nodelib/fs.scandir@2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} @@ -1302,7 +1338,7 @@ packages: vite: ^5.0.0 vue: ^3.2.25 dependencies: - vite: 5.2.2(@types/node@20.11.30)(sass@1.72.0) + vite: 5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2) vue: 3.4.21(typescript@5.4.3) dev: true @@ -1642,6 +1678,10 @@ packages: update-browserslist-db: 1.0.13(browserslist@4.23.0) dev: true + /buffer-from@1.1.2: + resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==} + dev: true + /cache-base@1.0.1: resolution: {integrity: sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==} engines: {node: '>=0.10.0'} @@ -1791,6 +1831,10 @@ packages: engines: {node: '>=16'} dev: true + /commander@2.20.3: + resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} + dev: true + /commander@7.2.0: resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} engines: {node: '>= 10'} @@ -4246,6 +4290,13 @@ packages: urix: 0.1.0 dev: true + /source-map-support@0.5.21: + resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==} + dependencies: + buffer-from: 1.1.2 + source-map: 0.6.1 + dev: true + /source-map-url@0.4.1: resolution: {integrity: sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==} deprecated: See https://github.com/lydell/source-map-url#deprecated @@ -4419,6 +4470,17 @@ packages: tslib: 2.6.2 dev: true + /terser@5.29.2: + resolution: {integrity: sha512-ZiGkhUBIM+7LwkNjXYJq8svgkd+QK3UUr0wJqY4MieaezBSAIPgbSPZyIx0idM6XWK5CMzSWa8MJIzmRcB8Caw==} + engines: {node: '>=10'} + hasBin: true + dependencies: + '@jridgewell/source-map': 0.3.6 + acorn: 8.11.3 + commander: 2.20.3 + source-map-support: 0.5.21 + dev: true + /text-extensions@2.4.0: resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==} engines: {node: '>=8'} @@ -4584,12 +4646,12 @@ packages: pathe: 0.2.0 svg-baker: 1.7.0 svgo: 2.8.0 - vite: 5.2.2(@types/node@20.11.30)(sass@1.72.0) + vite: 5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2) transitivePeerDependencies: - supports-color dev: true - /vite@5.2.2(@types/node@20.11.30)(sass@1.72.0): + /vite@5.2.2(@types/node@20.11.30)(sass@1.72.0)(terser@5.29.2): resolution: {integrity: sha512-FWZbz0oSdLq5snUI0b6sULbz58iXFXdvkZfZWR/F0ZJuKTSPO7v72QPXt6KqYeMFb0yytNp6kZosxJ96Nr/wDQ==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -4622,6 +4684,7 @@ packages: postcss: 8.4.38 rollup: 4.13.0 sass: 1.72.0 + terser: 5.29.2 optionalDependencies: fsevents: 2.3.3 dev: true diff --git a/vite.config.ts b/vite.config.ts index 4e55623..5ee7f88 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,4 +1,4 @@ -import { defineConfig, normalizePath } from "vite"; +import { defineConfig, normalizePath, loadEnv } from "vite"; import vue from "@vitejs/plugin-vue"; import path from "path"; import postcssPresetEnv from "postcss-preset-env"; @@ -6,55 +6,63 @@ import { createSvgIconsPlugin } from "vite-plugin-svg-icons"; const variablePath = normalizePath(path.normalize("./src/style/variable.scss")); // https://vitejs.dev/config/ -export default defineConfig({ - plugins: [ - vue(), - createSvgIconsPlugin({ - // 配置src下存放svg的路径，这里表示在src/icons文件夹下 - iconDirs: [path.resolve(process.cwd(), "src/icons")], - symbolId: "icon-[dir]-[name]" - }) - ], - resolve: { - // 配置别名 - alias: { - "@assets": path.join(__dirname, "src/assets") - } - }, - css: { - postcss: { - plugins: [postcssPresetEnv()] - }, - preprocessorOptions: { - scss: { - // additionalData的内容会在每个scss文件的开头自动注入 - additionalData: `@import "${variablePath}";` +export default defineConfig(({ mode }) => { + // 根路径 + const root = process.cwd(); + // 获取跟路径对应的文件 + const env = loadEnv(mode, root); + return { + // 开发或生产环境服务的公共基础路径 + base: env.VITE_PUBLIC_PATH, + plugins: [ + vue(), + createSvgIconsPlugin({ + // 配置src下存放svg的路径，这里表示在src/icons文件夹下 + iconDirs: [path.resolve(process.cwd(), "src/icons")], + symbolId: "icon-[dir]-[name]" + }) + ], + resolve: { + // 配置别名 + alias: { + "@assets": path.join(__dirname, "src/assets") } - } - }, - build: { - outDir: "dist", // 指定打包路径，默认为项目根目录下的dist目录 - assetsInlineLimit: 4 * 1024, // 打包内联阈值4kb - chunkSizeWarningLimit: 2000, // 规定触发警告的 chunk 大小, 消除打包大小超过500kb警告 - // minify: "esbuild", // esbuild 打包更快，但是不能去除 console.log，terser打包慢，但能去除 console.log - minify: "terser", // Vite 2.6.x 以上需要配置 minify："terser"，terserOptions才能生效，terser可以去除 console.log - terserOptions: { - compress: { - keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题 - drop_console: true, // 生产环境去除 console - drop_debugger: true // 生产环境去除 debugger + }, + css: { + postcss: { + plugins: [postcssPresetEnv()] }, - format: { - comments: false // 删除注释 + preprocessorOptions: { + scss: { + // additionalData的内容会在每个scss文件的开头自动注入 + additionalData: `@import "${variablePath}";` + } } }, - // 静态资源打包到dist下的不同目录,将文件类型css、js、jpg等文件分开存储 - rollupOptions: { - output: { - chunkFileNames: "static/js/[name]-[hash].js", - entryFileNames: "static/js/[name]-[hash].js", - assetFileNames: "static/[ext]/[name]-[hash].[ext]" + build: { + outDir: "dist", // 指定打包路径，默认为项目根目录下的dist目录 + minify: "esbuild", // esbuild打包更快但是不能去除console.log，terser打包慢但能去除console.log + // minify: "terser", // Vite 2.6.x 以上需要配置 minify："terser"，terserOptions才能生效，terser可以去除 console.log + // terserOptions: { + // compress: { + // keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题 + // drop_console: true, // 生产环境去除 console + // drop_debugger: true // 生产环境去除 debugger + // }, + // format: { + // comments: false // 删除注释 + // } + // }, + assetsInlineLimit: 4 * 1024, // 打包内联阈值4kb + chunkSizeWarningLimit: 2000, // 规定触发警告的 chunk 大小, 消除打包大小超过500kb警告 + // 静态资源打包到dist下的不同目录,将文件类型css、js、jpg等文件分开存储 + rollupOptions: { + output: { + chunkFileNames: "static/js/[name]-[hash].js", + entryFileNames: "static/js/[name]-[hash].js", + assetFileNames: "static/[ext]/[name]-[hash].[ext]" + } } } - } + }; });