Shopify部署下，如何配置Vite实现跨域名动态导入（代码分割）？

核心问题分析 #

你的问题源于Shopify部署的跨域资产路径特性：入口文件从CDN加载（带缓存参数），但Vite默认生成的动态chunk/CSS路径指向HTML域名，且未携带缓存参数，导致404和重复请求。

解决方案 #

1. 运行时动态注入CDN资产前缀 #

Shopify的CDN路径（含UUID和缓存参数）只能在运行时通过模板获取，在入口文件最顶部添加以下代码：

// src/main.ts 第一行
if (window.SHOPIFY_ASSET_BASE) {
  (import.meta as any).env.BASE_URL = window.SHOPIFY_ASSET_BASE;
}

然后在Shopify的Liquid模板（如extension.liquid）中注入全局变量：

<script>
  // 提取带缓存参数的CDN资产前缀
  window.SHOPIFY_ASSET_BASE = "{{ asset_url 'genesis-block.js' | split: 'genesis-block.js' | first }}";
</script>
<script src="{{ asset_url 'genesis-block.js' }}"></script>

这段Liquid代码会自动获取CDN的完整前缀（包括UUID和?v=xxx缓存参数），无需硬编码。

2. 调整Vite构建配置 #

修改vite.config.ts，确保生成的资源路径兼容动态base：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    cssCodeSplit: true, // 强制动态组件的CSS单独分割
    base: '', // 禁用静态base，依赖运行时动态设置
    rollupOptions: {
      input: './src/main.ts',
      output: {
        entryFileNames: 'assets/genesis-block.js',
        chunkFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/block.[ext]',
        format: 'es', // 使用ES模块，确保动态导入路径正确解析
        // 禁用rollup的绝对路径生成，强制相对路径
        paths: {
          './blocks/*': './blocks/*'
        }
      }
    }
  }
});

3. 验证动态组件导入 #

你的defineAsyncComponent代码无需修改，只要blocks目录在src下，路径解析就会正常：

blockTypes.forEach((blockType) => {
  app.component(
    blockType,
    defineAsyncComponent(() => import(`./blocks/${blockType}.vue`))
  );
});

效果验证 #

• 动态chunk会自动使用CDN域名+缓存参数请求，不再出现HTML域名的404
• Chunk引用入口文件时会携带缓存参数，避免重复请求未缓存的版本
• CSS chunk会通过动态base指向CDN，解决404问题

内容的提问来源于stack exchange，提问作者Jon