在Vue中引入外部css文件修改iframe嵌入页面的样式

1、将css文件放入public/static/css文件夹中

public目录下的所有文件编译之后都会拷贝到根目录，我们要想把这个文件夹下面的文件编译之后放到static下面，就只需要将public下的文件，都放到public/static文件夹下面，这样编译之后，会把所有静态文件都放到static文件夹下面。

2、添加link标签引入css文件

// 获取iframe html文件
const doc = this.$refs.iframe.contentWindow.document
// 获取iframe html文件head
const head = doc.getElementsByTagName('head')
// 新建link标签
const linkTag = document.createElement('link')
// link标签引入css文件的地址
linkTag.href = '/static/css/schedule_task.css'
// 设置link标签属性
linkTag.setAttribute('rel', 'stylesheet')
// 设置link标签属性
linkTag.setAttribute('type', 'text/css')
// 将link标签添加进iframe html文件的head里
head[0].append(linkTag)

项目打包后，项目dist/static/css文件夹中会有事先放在public文件夹下的css文件，href会链接读取到这个css文件，就可以成功修改iframe页面样式了。