在插件时长找了一个好看一点的富文本插件,倒腾了一下应用到项目中。自己测试的好好的,部署到内网,测试说无法编辑,且无法退出。开始查找原因,看了看报错的问题。

错误复现

请添加图片描述

有一个js加载不到https://unpkg.com/quill@1.3.7/dist/quill.min.js ,而且还是cdn远程加载的,在文件中搜索愣是没有找到。

因为知道这个quill.js,在其他项目中有用到吗,是一个富文本插件。就去看了看项目中这个富文本插件内部还引用了什么,看到富文本组件<editor />

定位问题

就去官网找了一下原来是一个内置组件,找到了注意事项说明,
请添加图片描述

按照提示进行解决,跳转地址自定义模板

在项目根目录中创建h5-template.html, 下载资源到本地,直接访问CDN地址,拷贝代码创建文件

quill.min.js

image-resize.min.js

我本地项目存储的地址为static/editor/**

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<!-- Open Graph data -->
		<!-- <meta property="og:title" content="Title Here" /> -->
		<!-- <meta property="og:url" content="http://www.example.com/" /> -->
		<!-- <meta property="og:image" content="http://example.com/image.jpg" /> -->
		<!-- <meta property="og:description" content="Description Here" /> -->
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
			document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
        <!-- editor 静态资源 -->
        <script type="text/javascript" src="/static/editor/quill.min.js"></script>
		<script type="text/javascript" src="/static/editor/image-resize.min.js"></script>
	</head>
	<body>
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		<div id="app"></div>
		<!-- built files will be auto injected -->
	</body>
</html>

修改根目录下的manifest.json文件,追加h5的配置,template改为h5-template.html

{
    //...
    "h5" : {
        "template" : "h5-template.html"
    }
}

问题解决

调整完后,重新启动,可以看到本地网络资源JS,已经提前加载了这两个资源
请添加图片描述

疑问记录
  1. h5-template.html 有一段

<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
不知道是啥,刚开始以为没用,就删了,导致整个项目的样式、布局乱掉了。慌得一批,也没在意这个。

后来想到这个,试了一下 🐵 可以了。

看样子应该是为了加载打包后的css样式。但内部的实现不得而知。

更多推荐