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-create创建VUE3项目详细图文教程

    vue-create创建VUE3项目详细图文教程

    create-vue是Vue官方新的脚手架工具,底层切换到了vite(下一代前端工具链),为开发提供极速响应,下面这篇文章主要给大家介绍了关于vue-create创建VUE3项目的相关资料,需要的朋友可以参考下
    2024-03-03
  • Vue中Vue.extend()的使用及解析

    Vue中Vue.extend()的使用及解析

    这篇文章主要介绍了Vue中Vue.extend()的使用及解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue跳转方式的常见方式以及区别分析

    vue跳转方式的常见方式以及区别分析

    在Vue.js中页面跳转是前端开发中常见的需求,Vue提供了多种页面跳转方式,这篇文章主要给大家介绍了关于vue跳转方式的常见方式以及区别分析的相关资料,需要的朋友可以参考下
    2024-02-02
  • JavaScript 沙箱探索

    JavaScript 沙箱探索

    这篇文章主要介绍了JavaScript 沙箱探索,沙箱是基于 event bus 形式的通信实现上层的功能,文章的例子选择接口实现了 web worker 与 quickjs 的 EventEmitter,,需要的朋友可以参考一下
    2021-10-10
  • vue实现动态表格提交参数动态生成控件的操作

    vue实现动态表格提交参数动态生成控件的操作

    这篇文章主要介绍了vue实现动态表格提交参数动态生成控件的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue3根据动态字段绑定v-model的操作代码

    Vue3根据动态字段绑定v-model的操作代码

    最近在学习vue技术,开发表格的时候,想把表格做成组件,那查询条件就需要动态生成,这就遇到一个问题,vue怎么动态给v-model变量值,本文通过实例代码给大家介绍,对Vue3动态绑定v-model实例代码感兴趣的朋友一起看看吧
    2022-10-10
  • 详解vue中多个有顺序要求的异步操作处理

    详解vue中多个有顺序要求的异步操作处理

    这篇文章主要介绍了vue中多个有顺序要求的异步操作处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • Vue项目创建首页发送axios请求的方法实例

    Vue项目创建首页发送axios请求的方法实例

    这篇文章主要给大家介绍了关于Vue项目创建首页发送axios请求的相关资料,文中通过图文以及实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-02-02
  • vuex存取值和映射函数使用说明

    vuex存取值和映射函数使用说明

    这篇文章主要介绍了vuex存取值和映射函数使用说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • html页面引入vue组件之http-vue-loader.js解读

    html页面引入vue组件之http-vue-loader.js解读

    这篇文章主要介绍了html页面引入vue组件之http-vue-loader.js解读,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04

最新评论