1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  build: {
    // Rollup 选项
    rollupOptions: {
      // 输入配置
      input: {
        main: path.resolve(__dirname, 'index.html'),
        // 多页面应用
        // admin: path.resolve(__dirname, 'admin.html'),
        // landing: path.resolve(__dirname, 'landing.html'),
      },
      
      // 输出配置
      output: {
        // 输出目录
        dir: 'dist',
        
        // 入口文件名
        entryFileNames: 'js/[name]-[hash].js',
        
        // chunk 文件名
        chunkFileNames: 'js/[name]-[hash].js',
        
        // 静态资源文件名
        assetFileNames: 'assets/[name]-[hash][extname]',
        
        // 手动分包
        manualChunks: {
          // vue 相关库打包到一起
          vue: ['vue', 'vue-router', 'pinia'],
        },
        
        // 是否生成 sourcemap
        // 'inline' | 'hidden' | false
        sourcemap: false,
      },
      
      // 是否将动态导入的模块内联到主 bundle
      // true: 所有动态导入的模块都内联到一个文件中
      // false（默认）: 每个动态导入模块单独生成一个 chunk
      inlineDynamicImports: false,
      
      // 外部依赖（不打包）
      external: [],
      
      // 插件
      plugins: [],
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// vite.config.js
export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'MyLibrary',
      formats: ['es', 'cjs', 'umd'],
      fileName: (format) => `my-library.${format}.js`,
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// ES Module 输出（es）
// 适合现代浏览器
export { createApp, createRouter } from 'vue'

// CommonJS 输出（cjs）
// 适合 Node.js
exports.createApp = createApp
exports.createRouter = createRouter

// UMD 输出（umd）
// 同时支持浏览器和 Node.js
(function(root, factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory()
  } else {
    root.MyLibrary = factory()
  }
}(this, function() {
  return { createApp, createRouter }
}))

// IIFE 输出（iife）
// 浏览器直接用
var MyLibrary = (function() {
  'use strict'
  return { createApp, createRouter }
})()

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  build: {
    lib: {
      // 库的入口文件
      entry: path.resolve(__dirname, 'src/index.ts'),
      
      // 库名称（全局变量名，UMD/IIFE 模式使用）
      name: 'MyVueComponents',
      
      // 输出文件名格式
      // 会生成：my-vue-components.es.js, my-vue-components.cjs.js, my-vue-components.umd.js
      fileName: (format) => `my-vue-components.${format}.js`,
      
      // 支持的输出格式
      formats: ['es', 'cjs', 'umd'],
    },
    
    // 库模式下关闭 CSS 分割
    cssCodeSplit: false,
    
    // Rollup 选项
    rollupOptions: {
      // UMD 模式下需要的全局变量
      // external: ['react', 'react-dom'],
      // globals: {
      //   react: 'React',
      //   'react-dom': 'ReactDOM',
      // },
      
      // 输出配置
      output: {
        // 对于 UMD 构建，需要提供全局变量名
        // globals: {
        //   vue: 'Vue',
        // },
      },
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

// src/index.ts

// 导出所有组件
export { default as Button } from './components/Button.vue'
export { default as Input } from './components/Input.vue'
export { default as Modal } from './components/Modal.vue'

// 导出工具函数
export { formatDate } from './utils/date'
export { debounce, throttle } from './utils/function'

// 导出类型
export type { ButtonProps } from './components/Button.vue'
export type { InputProps } from './components/Input.vue'

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      // 外部依赖，这些包不会被打包
      external: [
        'react',                    // npm 包名
        'react-dom',
        'lodash',
        /node_modules\/vue/,      // 正则匹配
      ],
      
      // 配置外部化的包的全局变量名
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- 通过 CDN 引入外部依赖 -->
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>
</html>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        // 入口文件名：main-a1b2c3d4.js
        entryFileNames: 'js/[name]-[hash:8].js',
        
        // chunk 文件名：chunk-vendor-a1b2c3d4.js
        chunkFileNames: 'js/[name]-[hash:8].js',
        
        // 静态资源：assets/logo-a1b2c3d4.png
        assetFileNames: (assetInfo) => {
          const info = assetInfo.name.split('.')
          const ext = info[info.length - 1]
          
          if (/\.(png|jpe?g|svg|gif|webp)$/.test(assetInfo.name)) {
            return `images/[name]-[hash:8].[ext]`
          }
          
          if (/\.(woff2?|eot|ttf|otf)$/.test(assetInfo.name)) {
            return `fonts/[name]-[hash:8].[ext]`
          }
          
          return `assets/[name]-[hash:8].[ext]`
        },
      },
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// 默认入口是 index.html
// 不需要额外配置

export default defineConfig({
  build: {
    // 可以指定根目录
    root: '.',
    
    rollupOptions: {
      input: path.resolve(__dirname, 'index.html'),
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        // 主应用
        main: path.resolve(__dirname, 'index.html'),
        
        // 管理后台
        admin: path.resolve(__dirname, 'admin.html'),
        
        // Landing Page
        landing: path.resolve(__dirname, 'landing.html'),
        
        // 帮助中心
        help: path.resolve(__dirname, 'help.html'),
      },
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import fs from 'fs'

// 自动扫描所有 html 文件作为入口
function getHtmlEntries() {
  const entries = {}
  const htmlFiles = fs.readdirSync(__dirname)
    .filter(file => file.endsWith('.html'))
    .filter(file => file !== '404.html')  // 排除 404
  
  htmlFiles.forEach(file => {
    const name = file.replace('.html', '')
    entries[name] = path.resolve(__dirname, file)
  })
  
  return entries
}

export default defineConfig({
  build: {
    rollupOptions: {
      input: getHtmlEntries(),
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// vite.config.js
export default defineConfig({
  build: {
    // 默认：'esbuild'
    // 压缩速度快，但压缩率不是最优
    minify: 'esbuild',
    
    // 关闭压缩（调试用）
    // minify: false,
  },
})

1

pnpm add -D terser

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// vite.config.js
export default defineConfig({
  build: {
    // 使用 terser 压缩（更慢但更小）
    minify: 'terser',
    
    terserOptions: {
      compress: {
        // 删除所有 console.log
        drop_console: true,
        // 删除所有 debugger
        drop_debugger: true,
        // 移除所有 console.*
        pure_funcs: ['console.log', 'console.info', 'console.debug'],
        // 启用所有压缩优化
        passes: 2,
        // 移除未使用的代码
        dead_code: true,
        // 压缩变量名
        variables: true,
        // 合并短代码
        join_vars: true,
      },
      mangle: {
        // 混淆变量名
        // 生产环境常用，上线后极难逆向
        safari10: true,  // 兼容 Safari 10
      },
      format: {
        // 移除注释
        comments: false,
      },
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

terserOptions: {
  compress: {
    // 删除所有 console（注意会影响 console.error 等）
    drop_console: false,  // 建议用 pure_funcs
    
    // 只删除指定的 console 方法
    pure_funcs: [
      'console.log',
      'console.info',
      'console.debug',
      'console.trace',
      'console.time',
      'console.timeEnd',
    ],
    
    // 删除 debugger 语句
    drop_debugger: true,
    
    // 移除未使用的代码
    dead_code: true,
    
    // 内联常量（将只使用一次的常量直接内联到使用处）
    collapse_vars: true,
    
    // 压缩属性访问
    computed_props: true,
    
    // 优化条件表达式
    conditionals: true,
    
    // 优化布尔表达式
    booleans: true,
    
    // 优化循环
    loops: true,
    
    // 优化 if 语句
    if_return: true,
    
    // 合并相同的代码
    merge_vars: true,
  },
  mangle: {
    // 属性名不混淆（否则 Vue/React 可能出问题）
    properties: false,
    
    // Safari 10 兼容
    safari10: true,
    
    // 保留的变量名（不混淆）
    reserved: ['Vue', 'React'],
  },
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

// ❌ 不利于 Tree Shaking
// module.js
export const foo = {
  // 这个对象在定义时就执行了，有副作用
  doSomething: () => console.log('side effect!')
}

// main.js
import { foo } from './module'
// 虽然只用到了 foo，但 doSomething 可能被认为有副作用而不被删除

// ✅ 有利于 Tree Shaking
// 把大对象拆分成多个小的 export
export function usedFunction() { /* ... */ }
export function anotherUsed() { /* ... */ }
// 未使用的 function 会被 Tree Shaking 删除

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "name": "my-library",
  "sideEffects": false,
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    }
  }
}

1
2
3
4
5
6
7

{
  "name": "my-library",
  "sideEffects": [
    "*.css",
    "./styles/main.css"
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// vite.config.js
export default defineConfig({
  build: {
    // 小于 4KB 的资源内联为 base64
    // 默认：4096（4KB）
    assetsInlineLimit: 4 * 1024,
    
    // 禁用 base64 内联
    // assetsInlineLimit: 0,
  },
})

1
2
3
4
5
6

// 使用 ?inline 查询参数强制内联
// 在 CSS 中
.logo {
  /* 会被内联为 base64 */
  background: url('/src/assets/logo.svg');
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // Vue 生态打包到一起
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          
          // React 生态打包到一起（如果用 React）
          // 'react-vendor': ['react', 'react-dom', 'react-router-dom'],
          
          // 工具库打包到一起
          'utils': [
            'lodash-es',
            'axios',
            'dayjs',
          ],
          
          // 图标库单独打包
          'icons': ['@iconify/vue', '@iconify/vue-icons'],
        },
      },
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          // node_modules 中的包
          if (id.includes('node_modules')) {
            // Vue 相关
            if (id.includes('vue') || id.includes('@vue')) {
              return 'vue-vendor'
            }
            
            // 大型 UI 库
            if (id.includes('element-plus') || id.includes('ant-design-vue')) {
              return 'ui-vendor'
            }
            
            // 其他 node_modules 包
            return 'vendor'
          }
          
          // src 中的工具函数
          if (id.includes('/utils/') || id.includes('/composables/')) {
            return 'shared'
          }
        },
      },
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Vue Router 示例
const routes = [
  // 直接导入（不分割，整个应用一起加载）
  // import Home from './views/Home.vue'
  
  // 懒加载（分割，每个页面单独一个 chunk）
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue'),
  },
  {
    path: '/about',
    name: 'About',
    // 带注释的 chunk 名
    component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
  },
  {
    path: '/user/:id',
    name: 'UserProfile',
    component: () => import('./views/UserProfile.vue'),
  },
]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<script setup>
import { defineAsyncComponent } from 'vue'

// 静态导入（不分割）
import HeavyChart from './components/HeavyChart.vue'

// 懒加载（分割）
const LazyModal = defineAsyncComponent(() => import('./components/Modal.vue'))
const LazyEditor = defineAsyncComponent(() => import('./components/RichEditor.vue'))
</script>

<template>
  <div>
    <!-- 需要时再加载 -->
    <LazyModal v-if="showModal" />
    <LazyEditor v-if="showEditor" />
  </div>
</template>

1
2
3
4
5
6
7
8
9

<script setup>
import { defineAsyncComponent } from 'vue'

// 预加载（利用浏览器的预加载提示，配合 defineAsyncComponent 使用）
const PreloadedComponent = defineAsyncComponent(() => import('./views/HeavyPage.vue'))

// 或者使用时才加载
const LazyComponent = defineAsyncComponent(() => import('./views/LazyPage.vue'))
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          // 第三方库分离
          if (id.includes('node_modules')) {
            // 超大库单独分包（更新频率低）
            if (id.includes('echarts') || id.includes('three')) {
              return 'vendor-heavy'
            }
            
            // 大型 UI 库
            if (id.includes('element-plus') || id.includes('ant-design')) {
              return 'vendor-ui'
            }
            
            // 中型库
            if (id.includes('vue') || id.includes('react')) {
              return 'vendor-framework'
            }
            
            // 小型工具库
            return 'vendor-utils'
          }
        },
      },
    },
  },
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// ❌ 引入整个 lodash（体积 ~70KB）
import _ from 'lodash'
console.log(_.debounce)

// ✅ 只引入需要的函数（体积 ~2KB）
import debounce from 'lodash/debounce'
console.log(debounce)

// ✅ 使用 lodash-es（天然支持 Tree Shaking）
import { debounce, throttle } from 'lodash-es'

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// Element Plus 按需引入
// ❌ 引入整个 Element Plus（体积 ~300KB）
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// ✅ 按需引入（只引入用到的组件）
import { 
  ElButton, 
  ElInput, 
  ElForm, 
  ElDialog 
} from 'element-plus'

// 自动导入插件
// vite.config.js
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

1

pnpm add -D rollup-plugin-visualizer

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      // 生成报告文件的路径
      filename: 'dist/stats.html',
      
      // 构建后自动打开
      open: true,
      
      // 显示 gzip 后的体积
      gzipSize: true,
      
      // 超过这个大小的文件会高亮
      maxFileSize: 500 * 1024,
      
      // 块大小显示格式
      // 'parsed': 解析后的大小
      // 'gzip': gzip 后的大小（需要 gzipSize: true）
      // 'stat': 原始文件大小
      displayBlock: true,
      
      // 排除某些包的分析
      exclude: ['node_modules/**', 'test/**'],
      
      // 使用内联可视化（不生成文件）
      // generateDataFile: false,
      // open: false,
    }),
  ],
})

1

pnpm add -D vite-bundle-visualizer

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteBundleVisualizer } from 'vite-bundle-visualizer'

export default defineConfig({
  plugins: [
    vue(),
    viteBundleVisualizer({
      // 分析模式
      // 'treemap' | 'sunburst' | 'network'
      analyzerMode: 'treemap',
      
      // 生成文件
      generateBundleFile: true,
      
      // 打开分析页面
      openOnGeneratedFile: true,
      
      // gzip 大小
      gzipSize: true,
    }),
  ],
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
    {
      name: 'build-performance-report',
      closeBundle() {
        // 这个钩子在构建结束时调用
        // 可以在这里输出性能报告
        console.log('✅ 构建完成！')
        console.log('📊 建议使用 rollup-plugin-visualizer 查看产物分析')
      },
    },
  ],
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

// vite.config.js
export default defineConfig({
  build: {
    // 目标浏览器
    // 'esnext': 假设浏览器支持最新 ES 特性
    // 或者指定具体的浏览器列表
    target: 'esnext',
    
    // 兼容更多浏览器
    // target: ['es2015', 'chrome49', 'firefox52', 'safari11'],
    
    // CSS 目标
    cssTarget: 'webkit5',  // Safari 14+
  },
})

1

pnpm add -D @vitejs/plugin-legacy

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
  plugins: [
    vue(),
    legacy({
      // 目标浏览器
      targets: ['defaults', 'not IE 11'],
      
      // 是否生成 polyfill
      polyfills: true,
      
      // HTML 模板处理
      renderLegacyChunks: true,
    }),
  ],
})

1
2
3
4
5

<!-- 现代浏览器 -->
<script type="module" src="/assets/index-a1b2c3d4.js"></script>

<!-- 老旧浏览器 -->
<script nomodule src="/assets/index-a1b2c3d4legacy.js"></script>

1

pnpm add -D @babel/core @babel/preset-env core-js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// babel.config.js
export default {
  presets: [
    ['@babel/preset-env', {
      // 按需 polyfill
      useBuiltIns: 'usage',
      corejs: 3,
      
      // 目标浏览器
      targets: {
        chrome: '80',
        firefox: '75',
        safari: '13',
      },
    }],
  ],
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// vite.config.js
export default defineConfig({
  esbuild: {
    // 关闭 Vite 内置的 JSX 处理
    // 让 babel 处理
  },
  plugins: [
    vue(),
  ],
  build: {
    target: 'esnext',
  },
})

1
2

<!-- index.html -->
<script src="https://polyfill.io/v3/polyfill.min.js"></script>

1
2
3
4
5
6
7
8

{
  "browserslist": [
    "> 1%",              // 市场占有率 > 1% 的浏览器
    "last 2 versions",   // 每个浏览器的最新两个版本
    "not dead",          // 仍然维护的浏览器
    "not IE 11"          // 排除 IE 11
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{
  "browserslist": [
    // 现代开发（推荐，不需要 IE11）
    "> 1%",
    "last 2 versions",
    "not dead",
    
    // 需要支持 IE11
    // "> 1%",
    // "last 2 versions",
    // "IE 11",
    
    // 极度保守（支持更老的浏览器）
    // "> 0.5%",
    // "last 2 versions",
    // "not dead",
  ]
}

1
2
3
4
5
6
7
8
9

// vite.config.js
export default defineConfig({
  // 部署到 CDN
  base: 'https://cdn.example.com/my-app/',
  
  build: {
    outDir: 'dist',
  },
})

1
2
3
4
5
6
7
8

<!-- index.html -->
<!-- 通过 CDN 引入常用库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.0/dist/vue.global.prod.js"></script>

<!-- 通过 esm.sh 引入 ESM 格式 -->
<script type="module">
  import { createApp } from 'https://esm.sh/vue@3.4.0'
</script>

1

pnpm add -D vite-plugin-cdn-upload

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cdnUpload from 'vite-plugin-cdn-upload'

export default defineConfig({
  plugins: [
    vue(),
    cdnUpload({
      // CDN 上传配置
      provider: 'aliyun',  // 'aliyun' | 'qiniu' | 'tcloud'
      region: 'oss-cn-hangzhou',
      bucket: 'my-static-assets',
      accessKeyId: process.env.CDN_AK,
      accessKeySecret: process.env.CDN_SK,
      
      // 上传后替换资源 URL
      replaceWith: (url) => `https://my-cdn.example.com/${url}`,
    }),
  ],
})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// vite.config.js
export default defineConfig({
  // 部署到子目录
  base: '/my-app/',
  
  // 或者使用相对路径
  // base: './',
  
  build: {
    // 资源发布到 CDN
    assetsDir: 'static',
    
    // Vite 使用顶层 base 配置来设置 CDN 地址
    // 可以通过环境变量动态设置
    // base: process.env.CDN_URL || '/',
  },
})