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实现2048小游戏功能思路详解

    vue实现2048小游戏功能思路详解

    这篇文章主要介绍了vue实现2048小游戏功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • 如何解决vuex在页面刷新后数据被清除的问题

    如何解决vuex在页面刷新后数据被清除的问题

    这篇文章主要介绍了如何解决vuex在页面刷新后数据被清除的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 解决vue请求接口第一次成功,第二次失败问题

    解决vue请求接口第一次成功,第二次失败问题

    这篇文章主要介绍了解决vue请求接口第一次成功,第二次失败问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue 导入js中的两种方法(示例详解)

    vue 导入js中的两种方法(示例详解)

    这篇文章主要介绍了vue 导入js中的方法,本文通过两种方法结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • vue+elemen实现el-tooltip在文本超出区域后浮现

    vue+elemen实现el-tooltip在文本超出区域后浮现

    el-tooltip组件本身就是悬浮提示功能,在对它进行二次封装时,实现超出的文本浮现,本文就来介绍一下vue+elemen实现el-tooltip在文本超出区域后浮现,感兴趣的可以了解一下
    2023-12-12
  • 在Vue3项目中使用VueCropper裁剪组件实现裁剪及预览效果

    在Vue3项目中使用VueCropper裁剪组件实现裁剪及预览效果

    这篇文章主要介绍了在Vue3项目中使用VueCropper裁剪组件(裁剪及预览效果),本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • Vue3+antDesignVue实现表单校验的方法

    Vue3+antDesignVue实现表单校验的方法

    这篇文章主要为大家详细介绍了基于Vue3和antDesignVue实现表单校验的方法,文中的示例代码讲解详细,具有一定的参考价值,需要的小伙伴可以了解下
    2024-01-01
  • 详解vue-cli4 配置不同开发环境打包命令

    详解vue-cli4 配置不同开发环境打包命令

    这篇文章主要介绍了vue-cli4 配置不同开发环境打包命令,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • VueJS组件之间通过props交互及验证的方式

    VueJS组件之间通过props交互及验证的方式

    本篇文章主要介绍了VueJS组件之间通过props交互及验证的方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-09-09
  • Vue使用百度地图实现城市定位

    Vue使用百度地图实现城市定位

    这篇文章主要为大家详细介绍了Vue使用百度地图实现城市定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论