@monaco-editor/react 搭配 vite 使用，以及如何使用本地 /min/vs 资源和 cdn 资源

获取 monaco-editor 的 vs 资源

前往 jsdelicr 这个网站下载 www.jsdelivr.com/package/npm…

存放在本地，拷贝 min 目录到 vite public 文件下就行

配置资源路径

这里不需要配置 /public，vite 默认会读取 public 下的文件内容，/public/min/vs 和 /min/vs 一样的

// 入口文件配置
import { loader } from '@monaco-editor/react';

const isCDN = import.meta.env.VITE_USE_CDN === 'true';

const CDN_PATH = isCDN
  ? `https://${import.meta.env.VITE_CDN_HOST}/${import.meta.env.VITE_BUILD_GIT_GROUP}/${import.meta.env.VITE_BUILD_GIT_PROJECT}/${import.meta.env.VITE_CDN_VERSION}/min/vs`
  : '/min/vs'; // 否则使用本地路径

loader.config({
  paths: {
    vs: CDN_PATH
  }
});

配置环境变量

根目录创建 .env 和 .env.production 文件，分别写入 VITE_USE_CDN=false 和 VITE_USE_CDN=true，这样根目录就可以拿到是否使用 VITE_USE_CDN 变量了

构建如何配置 cdn 路径

每个公司都不一样，我举例子，核心是配置 base: publicPath，自己根据不同环境设置不同路径就行

vite.config.js 文件配置注意要注入 cdn 变量

// buildArgv 这个参数每个公司获取方式不一样，如果是自己配置的变量构建获取就行。如果是平台注入的话，需要看下构建平台的参数。区分环境配置 cdn 路径就行

// TODO 读者可以自行根据公司情况完善
let CDN_ENV = '';
let CDN_HOST = '';

if (buildArgv?.env === 'daily') {
  CDN_ENV = 'daily';
  CDN_HOST = 'xxx';
} else if (buildArgv?.env === 'prod') {
  CDN_ENV = 'prod';
  CDN_HOST = 'xx';
}

const publicPath = CDN_ENV ? CDN_PATH : '/';

// 注入变量，不然入口文件拿不到变量，导致 loader 获取资源出现问题
// TODO 读者自行获取 CDN_HOST BUILD_GIT_GROUP BUILD_GIT_PROJECT CDN_VERSION 的变量
export default defineConfig({
  define: {
    'import.meta.env.VITE_CDN_HOST': JSON.stringify(CDN_HOST),
    'import.meta.env.VITE_BUILD_GIT_GROUP': JSON.stringify(BUILD_GIT_GROUP),
    'import.meta.env.VITE_BUILD_GIT_PROJECT': JSON.stringify(BUILD_GIT_PROJECT),
    'import.meta.env.VITE_CDN_VERSION': JSON.stringify(CDN_VERSION),
    'process.env': {
    },
    process: undefined, // 或者根据需要定义一个基本的process对象
  },
  base: publicPath,
})