Vue mavon-editor 本地加载-关闭CDN体验焕然一新

2023-09-29 20:56:17

引言

在使用 Vue 中的 mavon-editor 编辑器时，它默认会加载一个 CDN。这可能会导致一些问题，例如资源加载失败或延迟。为了解决这些问题，我们可以选择关闭 CDN 并改用本地加载的方式。

关闭 CDN

要关闭 CDN，我们需要在 Vue 的 main.js 文件中添加以下代码：

import Vue from 'vue'
import mavonEditor from 'mavon-editor'
Vue.use(mavonEditor)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

通过在 <script> 标签的前面加上 type="module" 来启用 ES 模块支持，并移除 <link> 标签。

如果要关闭 CDN 链接，需要在 <script> 标签的前面加上 type="module" 来启用 ES 模块支持，并移除 <link> 标签。

<script type="module">
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
Vue.use(mavonEditor)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})
</script>

本地加载

接下来，我们需要将 mavon-editor 的资源文件下载到本地。我们可以从 mavon-editor 的 GitHub 仓库中下载。

下载完成后，我们需要将这些资源文件复制到我们的项目目录中。

例如，我们可以将 mavon-editor.min.js 文件复制到 static/js 目录中，将 mavon-editor.min.css 文件复制到 static/css 目录中。

static
├── css
│   └── mavon-editor.min.css
└── js
    └── mavon-editor.min.js

最后，我们需要在我们的 HTML 文件中引用这些资源文件。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <link rel="stylesheet" href="static/css/mavon-editor.min.css">
</head>
<body>
  <div id="app"></div>

  <script src="static/js/mavon-editor.min.js"></script>
  <script src="static/js/main.js"></script>
</body>
</html>