将 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
相关推荐
琹箐20 分钟前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
爱电摇的小码农24 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
Tttian6221 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
元气小嘉2 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
cccyi72 小时前
Vue3基础知识
javascript·vue.js
江城开朗的豌豆3 小时前
Vue计算属性:为什么我的代码突然变优雅了?
前端·javascript·vue.js
Sun_light3 小时前
5 个理由告诉你为什么有了 JS 还要用 TypeScript
前端·typescript
拾光拾趣录4 小时前
虚拟DOM超详细流程
前端·vue.js·dom
拾光拾趣录4 小时前
Vue 项目监听页面 Hash 变化
前端·vue.js·vue-router
梨子同志4 小时前
Vue Options API vs Composition API
前端·vue.js