将 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
相关推荐
海天胜景31 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼31 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再35 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55540 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
木头没有瓜2 小时前
vscode离线安装插件
ide·vue.js·vscode
浪裡遊3 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
markyankee1014 小时前
使用 Vue 脚手架创建项目的完整指南
vue.js
青松学前端4 小时前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
流星稍逝4 小时前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js
eric*16886 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹