vue项目中怎样嵌入其它项目的页面

 更新时间:2023年10月10日 16:48:46   作者:yumihe  
这篇文章主要介绍了vue项目中怎样嵌入其它项目的页面问题,具有很好 的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue项目嵌入其它项目的页面

通过iframe嵌入,src的路径在static中(vue-cli3在public)配置

编译打包时,不会将static/public里的文件编译,前端可修改index.js里的url

方式一

创建index.js,在入口页面中引入

static/urls/index.js

window.urlsPath = {
    statisticsUrl: 'http://xx.xx.xx.xx:80'
}

入口index.html

// 注意引入js时的路径
// statis
<script src="/static/urls/index.js"></script>
// public
<script src="./urls/index.js"></script>

statistics.js

<iframe src="url" frameborder="0" width="100%" height="100%"></iframe>
created() {
    this.url = window.urlsPath.statisticsUrl + '#/dataStatistics?userId=' + sessionStorageGet('loginData').userId
}

方式二

通过在main.js中请求json文件的方式,拿到url

new Vue({
  router,
  store,
  render: h => h(App),
  created() {
    axios.get('/urls/urls.json').then(res=> {
      if(res.data.code === '0') {
        utils.sessionStorageSet('defaultConfig', res.data.data)
      }
    })
  }
}).$mount('#app');

以vue-cli3为例,public/urls/urls.json

{
  "code":"0",
  "data":{
    "statisticsUrl": "http://xx.xx.xx.xx:80"
  }
}

vue嵌入本地html页面

问题描述:

向vue项目中嵌入html页面

失败原因:

代码结构不同,需要放到指定位置

解决:

把本地html、css\js\img都放到与src同级的public\static下

1

嵌入代码

<template>
     <div style="width: 100%">
    <!--静态html资源-->
    <div>
      <iframe src="/static/demo01.html" scrolling="auto" frameborder="0" style="width: 100%;height: 900px;"></iframe>
    </div>
</div>
</template>
<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
    },
    created() {
    }
  }
</script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 一篇文章带你了解vue路由

    一篇文章带你了解vue路由

    这篇文章主要为大家详细介绍了vue的路由,路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源,本文具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue生成初始化名字相近的变量并放到数组中的示例代码

    vue生成初始化名字相近的变量并放到数组中的示例代码

    项目上有一个需求,页面上有50、60个数据变量,是依次排序递增的变量,中间有个别变量用不到,不想把这些变量直接定义在data() { }内,这篇文章主要介绍了vue生成初始化名字相近的变量并放到数组中的示例代码,需要的朋友可以参考下
    2024-08-08
  • Vue对Element中el-tab-pane添加@click事件无效问题解决

    Vue对Element中el-tab-pane添加@click事件无效问题解决

    这篇文章主要给大家介绍了关于Vue对Element中el-tab-pane添加@click事件无效问题的解决办法,文中通过图文以及代码示例介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • vue非父子组件通信问题及解决方法

    vue非父子组件通信问题及解决方法

    这篇文章主要介绍了vue非父子组件通信问题及解决方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • 在vue中实现日历功能的代码示例

    在vue中实现日历功能的代码示例

    在许多Web应用程序中,日历是一个常见的组件,它通常用于显示日期、安排会议、查看活动等,在Vue中,我们可以使用第三方库来轻松实现日历功能,也可以手动编写代码来实现日历的展示和操作,本文将介绍如何使用vue-calendar和手动编写代码来实现日历功能
    2023-07-07
  • webpack安装配置与常见使用过程详解(结合vue)

    webpack安装配置与常见使用过程详解(结合vue)

    这篇文章主要介绍了webpack安装配置与常见使用过程,主要结合vue实现,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • antd form表单数据回显操作

    antd form表单数据回显操作

    这篇文章主要介绍了antd form表单数据回显操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue定时器设置和关闭页面时关闭定时器方式

    vue定时器设置和关闭页面时关闭定时器方式

    这篇文章主要介绍了vue定时器设置和关闭页面时关闭定时器方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue实现大文件切片上传的示例详解

    vue实现大文件切片上传的示例详解

    前端上传文件很大时,会出现各种问题,比如连接超时了,网断了,都会导致上传失败,这个时候就需要将文件切片上传,下面我们就来学习一下如何使用vue实现大文件切片上传吧
    2023-11-11
  • vue cli如何配置开发环境下的sourcemap

    vue cli如何配置开发环境下的sourcemap

    这篇文章主要介绍了vue cli如何配置开发环境下的sourcemap问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-06-06

最新评论