快捷導(dǎo)航

vue3-ace-editor如何配置語法

更新時(shí)間：2026年02月07日 09:28:03 作者：兜小糖的小禿毛

這篇文章主要介紹了vue3-ace-editor如何配置語法問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue3-ace-editor配置語法

<template>
  <v-ace-editor
    v-model:value="sqlContent"
    @init="editorInit"
    lang="javascript"
    :options="{
      enableBasicAutocompletion: true,
      enableSnippets: true,
      enableLiveAutocompletion: true,
      fontSize: 14,
      tabSize: 2,
      showPrintMargin: false,
      highlightActiveLine: true,
    }"
    theme="monokai"
    style="height: 400px; width: 400px; background: #000; color: #fff"
  >
  </v-ace-editor>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  onMounted,
  nextTick,
} from "vue";
import * as ace from 'ace-builds';
ace.config.set('basePath', '/static/src-min-noconflict/');
import { VAceEditor } from "vue3-ace-editor";
export default defineComponent({
  name: "page-three",
  components: {
    VAceEditor,
  },
  setup() {
    const sqlContent = ref("");
    const state = reactive({
      test: "",
    });
    function editorInit() {
      require("ace-builds/src-noconflict/ext-language_tools");
      require("ace-builds/src-noconflict/snippets/sql");
      require("ace-builds/src-noconflict/mode-sql");
      require("ace-builds/src-noconflict/theme-monokai");
      require("ace-builds/src-noconflict/mode-html");
      require("ace-builds/src-noconflict/mode-html_elixir");
      require("ace-builds/src-noconflict/mode-html_ruby");
      require("ace-builds/src-noconflict/mode-javascript");
      require("ace-builds/src-noconflict/mode-python");
      require("ace-builds/src-noconflict/snippets/less");
      require("ace-builds/src-noconflict/theme-chrome");
      require("ace-builds/src-noconflict/ext-static_highlight");
      require("ace-builds/src-noconflict/ext-beautify");
    }
    onMounted(() => {
      nextTick(() => {
        editorInit;
      });
    });
    return {
      sqlContent,
      ...toRefs(state),
      editorInit,
    };
  },
});
</script>

<style>
/* 修改光標(biāo)顏色 */
.ace_cursor {
  color: #fff !important;
}
</style>

vue3-ace-editor報(bào)Failed to execute ‘importScripts‘ on ‘WorkerGlobalScope‘錯(cuò)誤處理

因?yàn)轫?xiàng)目需要引入vue3-ace-editor編輯器，下面是引入后的設(shè)置

引入后發(fā)現(xiàn)每個(gè)只要用到ace-editor的組件就報(bào)

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://172.16.38.100:3000/worker-javascript.js' failed to load.

如下：