在插件时长找了一个好看一点的富文本插件,倒腾了一下应用到项目中。自己测试的好好的,部署到内网,测试说无法编辑,且无法退出。开始查找原因,看了看报错的问题。
有一个js加载不到https://unpkg.com/[email protected]/dist/quill.min.js
,而且还是cdn远程加载的,在文件中搜索愣是没有找到。
因为知道这个quill.js,在其他项目中有用到吗,是一个富文本插件。就去看了看项目中这个富文本插件内部还引用了什么,看到富文本组件
按照提示进行解决,跳转地址自定义模板
在项目根目录中创建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>
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('+ (coverSupport ? ', viewport-fit=cover' : '') + '" />')
script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
<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>
body>
html>
修改根目录下的manifest.json
文件,追加h5的配置,template改为h5-template.html
{
//...
"h5" : {
"template" : "h5-template.html"
}
}
调整完后,重新启动,可以看到本地网络资源JS,已经提前加载了这两个资源
h5-template.html
有一段
不知道是啥,刚开始以为没用,就删了,导致整个项目的样式、布局乱掉了。慌得一批,也没在意这个。
后来想到这个,试了一下 可以了。
看样子应该是为了加载打包后的css样式。但内部的实现不得而知。