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>

总结

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

相关文章

  • VUE3基础学习之click事件详解

    VUE3基础学习之click事件详解

    由于vue是一个双向数据绑定的框架,它的点击事件与以前常用的还是有很大的差别的,下面这篇文章主要给大家介绍了关于VUE3基础学习之click事件的相关资料,需要的朋友可以参考下
    2022-01-01
  • 浅谈vue中关于checkbox数据绑定v-model指令的个人理解

    浅谈vue中关于checkbox数据绑定v-model指令的个人理解

    这篇文章主要介绍了浅谈vue中关于checkbox数据绑定v-model指令的个人理解,v-model用于表单的数据绑定很常见,下面就来详细的介绍一下
    2018-11-11
  • web项目开发VUE的混入与继承原理

    web项目开发VUE的混入与继承原理

    这篇文章主要介绍了web项目开发中VUE的混入与继承原理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2021-09-09
  • element中el-form-item属性prop踩坑

    element中el-form-item属性prop踩坑

    最近需要用到vue,在el-form-item属性prop上遇到报错或者没绑定到数据,本文主要介绍了element中el-form-item属性prop踩坑,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue如何动态配置ip与端口

    vue如何动态配置ip与端口

    这篇文章主要介绍了vue如何动态配置ip与端口,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • 详解el-table表头文字换行的三种方式

    详解el-table表头文字换行的三种方式

    本文主要介绍了el-table表头文字换行的三种方式,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Vue数据监听方法watch的使用

    Vue数据监听方法watch的使用

    这篇文章主要介绍了Vue数据监听方法watch的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue filter的四种用法小结

    vue filter的四种用法小结

    这篇文章主要介绍了vue filter的四种用法小结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue之父组件向子组件传值并改变子组件的样式

    vue之父组件向子组件传值并改变子组件的样式

    这篇文章主要介绍了vue之父组件向子组件传值并改变子组件的样式,需要的朋友可以参考下
    2022-12-12
  • vue使用Office Web实现线上文件预览

    vue使用Office Web实现线上文件预览

    这篇文章主要为大家介绍了vue使用微软的开发接口Office Web,实现线上文件预览,预览word,excel,pptx,pdf文件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论