将 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
相关推荐
HED1 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
清风细雨_林木木2 小时前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
局外人LZ3 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
宝拉不想努力了3 小时前
vue element使用el-table时,切换tab,table表格列项发生错位问题
前端·vue.js·elementui
神仙别闹5 小时前
基于VUE+Node.JS实现(Web)学生组队网站
前端·vue.js·node.js
HuaHua的世界7 小时前
说说 Vue 中 CSS scoped 的原理?
css·vue.js
H5开发新纪元7 小时前
Vue 项目中 Loading 状态管理及页面切换 Bug 分析
前端·vue.js
icefiresong249 小时前
如何让 Vue 组件自动清理 EventBus 监听器?告别内存泄漏!
vue.js
tjh000111 小时前
vue3+TS 手动实现表格滚动
前端·javascript·vue.js
章若楠圈外男友11 小时前
修改了Element UI中组件的样式,打包后样式丢失
前端·vue.js