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

2024-03-25 23:42:38 +08:00 · 2024-03-25 23:42:38 +08:00 · 77ab7b3974
commit 77ab7b3974
parent 9ba5dcbf50
6 changed files with 137 additions and 50 deletions
--- a/.env
+++ b/.env
@ -0,0 +1,5 @@
+# 生产环境优先级
+# development & production > .env
+
+# 静态资源url
+VITE_IMG_BASE_URL = 'https://my-image-cdn.com'
--- a/.env.development
+++ b/.env.development
@ -0,0 +1,5 @@
+# 开发环境
+VITE_USER_NODE_ENV = development
+
+# 开发环境地址前缀 (一般 '/' 或 './' 都可以)
+VITE_PUBLIC_PATH = '/'
--- a/.env.production
+++ 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/'
--- 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",
--- 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
--- 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]"
+        }
      }
    }
-  }
+  };
 });