vue引入外部URL链接

大家应该都知道vue引用外部链接可以使用iframe,使用也很简单，那下面再为大家介绍另外一种写法
使用v-html，下面我就直接沾代码了, 基于vue3，写的比较简单，没有很完整的处理，就写了一个例子，大家只是参考一下，后期大家可以封装成组件，这里也不多说了，一看都会明白的，我也是只是做一个记录。

<template>
  <div v-html="html" class="htmlClass"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
onMounted(() => {
  load('https://m.baidu.com/usrprofile?action=square')
})
const html = ref('')
function load(url) {
  if (url && url.length > 0) {
    // 加载中
    let param = {
      accept: 'text/html, text/plain'
    }
    axios.get(url, param).then((response) => {
      // 处理HTML显示
      html.value = response.data
    }).catch(() => {
      html.value = '加载失败'
    })
  }
}

</script>
<style scoped>
.htmlClass {
  overflow-y: scroll;
  height: 100vh;
}
div::-webkit-scrollbar {
  display: none
}
</style>

注意事项：

• 直接使用axios处理的GET请求，需要处理跨域
• 外部的css样式会作用到显示的html
• 同时加载的外部html里的script也可能会执行，需要按需处理下
• 外部HTML文件内部的相对路径将不会被自动识别，绝对路径可以

NGINX跨域配置：
（Origin如果使用*的话，好像会出错，这里直接使用请求源的地址，如果担心安全性的话，可以用if+正则条件判断下）

location / {
    add_header Access-Control-Allow-Origin $http_origin;
    add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Allow-Methods GET;

    access_log  /data/nginx/logs/fdfs_https.log  main;

    ...
}