第三十六章-Vite配置-build.polyfillDynamicImport

1.说明

Vite配置-build.polyfilldynamicimport英文说明

拥抱Vite2.0 系列（二） - 知乎

原文：

• 类型： boolean

• 默认： true，除非build.target是esnext。

  是否自动注入动态导入polyfill。

  polyfill会自动注入到每个index.html条目的代理模块中。如果通过build.rollupOptions.input配置成使用非html的自定义条目，那么就需要手动导入自定义条目中的polyfill：

  import 'vite/dynamic-import-polyfill'
  

注意：polyfill不适用于库模式。如果你需要支持没有本地动态导入的浏览器，你可能应该避免在你的库中使用它。

Vite使用ES动态导入作为代码分割点。生成的代码还将使用动态导入来加载异步块。然而，本机ESM动态导入支持是在ESM之后通过脚本标记实现的，并且这两个特性在浏览器支持方面存在差异。Vite会自动注入一个轻量级的动态导入填充来消除这种差异。

如果你知道你的目标浏览器只支持本机动态导入，你可以通过build.polyfillDynamicImport显式禁用此特性。

总之VbenAdmin中在生产环境将此项禁用了。如果打包后的项目有问题，而本地运行没问题。那么尝试打开它，因为这个配置貌似和浏览器有关。

2.创建全局常量

这个输出路径我们把它写成一个全局常量。全局常量保存在：build\constant.ts

/**
 * 在生产环境中输入的配置文件名称。
 */
export const GLOB_CONFIG_FILE_NAME = '_app.config.js';

export const OUTPUT_DIR = 'dist';

然后在vite.config.ts中引用：

// ...

import { OUTPUT_DIR } from './build/constant';

// ...

export default ({ command, mode }: ConfigEnv): UserConfig => {
  // ...
  return {
    // ...
    build: {
      outDir: OUTPUT_DIR,
    },
    // ...
  };
};

上一章

第三十五章-Vite配置-build.outDir

下一章

第三十七章-Vite配置-build.terserOptions