将 vue文件转为字符串在Codemirror里面展示

第一种直接引入

javascript 复制代码
import index from "./FFCesiumExample/basicOperationInterface/addIconMap.vue?raw";

index直接就是字符串。但是出现一个问题就是build的时候可以出警告,。so还有第二种

javascript 复制代码
const readFile = (filePath) => {
  // 创建一个新的xhr对象
  let xhr = null;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    // eslint-disable-next-line
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  const okStatus = document.location.protocol === "file" ? 0 : 200;
  xhr.open("GET", filePath, false);
  xhr.overrideMimeType("text/html;charset=utf-8");
  xhr.send(null);
  return xhr.status === okStatus ? xhr.responseText : null;
};

使用时:

传入url文件路径

javascript 复制代码
let inedx =  readFile(url);

嘎嘎嘎就好了

然后codemirror使用

javascript 复制代码
<Codemirror
      class="experience-editor-code"
      v-model:value="code"
      :options="cmOptions"
      border
      ref="myCm"
    >
    </Codemirror>

//伪代码
code.value = index
相关推荐
gnip3 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
王王碎冰冰10 小时前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
天蓝色的鱼鱼11 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin11 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
我是日安11 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js
DevUI团队12 小时前
🚀 MateChat V1.8.0 震撼发布!对话卡片可视化升级,对话体验全面进化~
前端·vue.js·人工智能
RoyLin12 小时前
TypeScript设计模式:责任链模式
前端·后端·typescript
好好好明天会更好12 小时前
pinia从定义到运用
前端·vue.js
代码小学僧12 小时前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
RoyLin12 小时前
TypeScript设计模式:装饰器模式
前端·后端·typescript