feat: 打包配置和环境变量配置

.env

@@ -0,0 +1,5 @@
+# 生产环境优先级
+# development & production > .env
+
+# 静态资源url
+VITE_IMG_BASE_URL = 'https://my-image-cdn.com'

.env.development

@@ -0,0 +1,5 @@
+# 开发环境
+VITE_USER_NODE_ENV = development
+
+# 开发环境地址前缀 (一般 '/' 或 './' 都可以)
+VITE_PUBLIC_PATH = '/'

.env.production

@@ -0,0 +1,5 @@
+# 生产环境
+VITE_USER_NODE_ENV = production
+
+# 打包路径 (就是网站前缀, 例如部署到 http://dcodes.gitee.io/dc-admin/ 域名下, 就需要填写 /dc-admin/), 一般填一个斜杠 /
+VITE_PUBLIC_PATH = '/dc-admin/'

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",

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

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,7 +6,14 @@ import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 const variablePath = normalizePath(path.normalize("./src/style/variable.scss"));
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => {
+  // 根路径
+  const root = process.cwd();
+  // 获取跟路径对应的文件
+  const env = loadEnv(mode, root);
+  return {
+    // 开发或生产环境服务的公共基础路径
+    base: env.VITE_PUBLIC_PATH,
     plugins: [
       vue(),
       createSvgIconsPlugin({
@@ -34,20 +41,20 @@ export default defineConfig({
     },
     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警告
-    // 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 // 删除注释
-      }
-    },
       // 静态资源打包到dist下的不同目录,将文件类型css、js、jpg等文件分开存储
       rollupOptions: {
         output: {
@@ -57,4 +64,5 @@ export default defineConfig({
         }
       }
     }
+  };
 });