github打包配置环境变量

lch-coder · lch-coder · commit 645f8d34f3aa · 2023-03-05T13:58:31.000+08:00
diff --git a/.env.github b/.env.github
@@ -0,0 +1 @@
+VITE_APP_BASE_URL = /buildElement/
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -23,7 +23,7 @@ jobs:
       - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
         run: |
           pnpm install
-          pnpm run build --base /buildElement/
+          pnpm run build:github
           cp dist/index.html dist/404.html
       - name: Deploy 🚀
         uses: peaceiris/actions-gh-pages@v3
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
+    "build:github": "vue-tsc --noEmit && vite build --mode github",
     "preview": "vite preview --port 8888",
     "eslint": "eslint src --fix --ext .js,.ts,.jsx,.tsx,.vue"
   },
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import { visualizer } from 'rollup-plugin-visualizer'
@@ -15,76 +15,80 @@ import postcssPresetEnv from 'postcss-preset-env'
 import { formatDate } from './src/utils/time'
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  base: '/',
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, 'src'),
+export default ({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+  const { VITE_APP_BASE_URL: BASE_URL = '/' } = env
+  return defineConfig({
+    base: BASE_URL,
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src'),
+      },
     },
-  },
-  build: {
-    terserOptions: {
-      compress: {
-        keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
-        drop_console: true, // 生产环境去除 console
-        drop_debugger: true, // 生产环境去除 debugger
+    build: {
+      terserOptions: {
+        compress: {
+          keep_infinity: true, // 防止 Infinity 被压缩成 1/0，这可能会导致 Chrome 上的性能问题
+          drop_console: true, // 生产环境去除 console
+          drop_debugger: true, // 生产环境去除 debugger
+        },
       },
     },
-  },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        additionalData: `@use "@/styles/theme.scss" as *;`,
+    css: {
+      preprocessorOptions: {
+        scss: {
+          additionalData: `@use "@/styles/theme.scss" as *;`,
+        },
+      },
+      postcss: {
+        plugins: [postcssPresetEnv()],
       },
     },
-    postcss: {
-      plugins: [postcssPresetEnv()],
+    define: {
+      __PKG_TIME__: JSON.stringify(formatDate(new Date())),
     },
-  },
-  define: {
-    __PKG_TIME__: JSON.stringify(formatDate(new Date())),
-  },
-  plugins: [
-    vue(),
-    vueJsx(),
-    visualizer({
-      // open: true, //注意这里要设置为true，否则无效
-      gzipSize: true,
-      brotliSize: true,
-    }),
-    AutoImport({
-      imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
-      dts: './src/auto-imports.d.ts',
-      eslintrc: {
-        enabled: false, // Default `false`
-        filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
-        globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
-      },
-      resolvers: [ElementPlusResolver()],
-    }),
-    Components({
-      dirs: ['src/components'],
-      resolvers: [ElementPlusResolver()],
-      dts: 'src/components.d.ts',
-      include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/, /\.md$/],
-    }),
-    // ElementPlus(),
-    Unocss(),
-    viteMockServe({
-      supportTs: false,
-      logger: false,
-      mockPath: './src/mock',
-      localEnabled: true, // 开发打包开关
-      prodEnabled: true, // 生产打包开关 // 这样可以控制关闭mock的时候不让mock打包到最终代码内
-      injectCode: ` import { setupProdMockServer } from './mockProdServer'; setupProdMockServer(); `,
-    }),
-    vueSetupExtend(),
-    eslintPlugin(),
-    webUpdateNotice({ logVersion: true, injectFileBase: '/' }),
-  ],
-  server: {
-    host: '0.0.0.0',
-    open: true,
-    port: 4646,
-  },
-})
+    plugins: [
+      vue(),
+      vueJsx(),
+      visualizer({
+        // open: true, //注意这里要设置为true，否则无效
+        gzipSize: true,
+        brotliSize: true,
+      }),
+      AutoImport({
+        imports: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
+        dts: './src/auto-imports.d.ts',
+        eslintrc: {
+          enabled: false, // Default `false`
+          filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
+          globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
+        },
+        resolvers: [ElementPlusResolver()],
+      }),
+      Components({
+        dirs: ['src/components'],
+        resolvers: [ElementPlusResolver()],
+        dts: 'src/components.d.ts',
+        include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/, /\.md$/],
+      }),
+      // ElementPlus(),
+      Unocss(),
+      viteMockServe({
+        supportTs: false,
+        logger: false,
+        mockPath: './src/mock',
+        localEnabled: true, // 开发打包开关
+        prodEnabled: true, // 生产打包开关 // 这样可以控制关闭mock的时候不让mock打包到最终代码内
+        injectCode: ` import { setupProdMockServer } from './mockProdServer'; setupProdMockServer(); `,
+      }),
+      vueSetupExtend(),
+      eslintPlugin(),
+      webUpdateNotice({ logVersion: true, injectFileBase: BASE_URL }),
+    ],
+    server: {
+      host: '0.0.0.0',
+      open: true,
+      port: 4646,
+    },
+  })
+}
