vite 静态资源cdn部署 vite.config.js

Vite 是一个现代的前端构建工具，它采用预渲染的方式提供快速的开发体验。关于在 Vite 中配置静态资源通过 CDN 进行部署，`vite.config.js` 文件扮演了关键角色。

首先，在 `vite.config.js` 文件中，你可以找到 `build` 或者 `serve` 配置部分。如果你的目标是生产环境部署，通常会关注 `build` 部分。在那里，你可以设置 `assetDir` 属性来指定生成文件的位置，例如：

export default defineConfig({
  build: {
    assetDir: 'static', // 将资源放在 static 目录下
    rollupOptions: {
      output: {
        // 使用相对路径而不是绝对路径
        dir: './dist', // 输出目录，CDN域名下的根目录
        entryFileNames: 'js/[name].js',
        chunkFileNames: 'js/[name].[hash].js',
      },
    },
  },
});

接下来，你需要将这些打包后的静态资源上传到 CDN 服务提供商，比如阿里云的OSS、Cloudflare、又拍云等。配置完成后，Vite 的静态资源会被自动指向你在 CDN 上设置的路径。

为了实现CDN缓存加速，你可以在 `output` 对象中添加 `publicPath`，这将是你的资源访问前缀，如 `https://cdn.example.com/dist/`。