欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項目中怎樣嵌入其它項目的頁面

 更新時間：2023年10月10日 16:48:46   作者：yumihe  
這篇文章主要介紹了vue項目中怎樣嵌入其它項目的頁面問題,具有很好 的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue項目嵌入其它項目的頁面

通過iframe嵌入，src的路徑在static中（vue-cli3在public）配置

編譯打包時，不會將static/public里的文件編譯，前端可修改index.js里的url

方式一

創(chuàng)建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頁面

失敗原因：

代碼結(jié)構(gòu)不同，需要放到指定位置

解決：

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

1

嵌入代碼

<template>
     <div style="width: 100%">
    <!--靜態(tài)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>

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • vue-create創(chuàng)建VUE3項目詳細圖文教程

    vue-create創(chuàng)建VUE3項目詳細圖文教程

    create-vue是Vue官方新的腳手架工具,底層切換到了vite(下一代前端工具鏈),為開發(fā)提供極速響應(yīng),下面這篇文章主要給大家介紹了關(guān)于vue-create創(chuàng)建VUE3項目的相關(guān)資料,需要的朋友可以參考下
    2024-03-03
  • Vue中Vue.extend()的使用及解析

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

    這篇文章主要介紹了Vue中Vue.extend()的使用及解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-10-10
  • vue跳轉(zhuǎn)方式的常見方式以及區(qū)別分析

    vue跳轉(zhuǎn)方式的常見方式以及區(qū)別分析

    在Vue.js中頁面跳轉(zhuǎn)是前端開發(fā)中常見的需求,Vue提供了多種頁面跳轉(zhuǎn)方式,這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)方式的常見方式以及區(qū)別分析的相關(guān)資料,需要的朋友可以參考下
    2024-02-02
  • JavaScript 沙箱探索

    JavaScript 沙箱探索

    這篇文章主要介紹了JavaScript 沙箱探索，沙箱是基于 event bus 形式的通信實現(xiàn)上層的功能，文章的例子選擇接口實現(xiàn)了 web worker 與 quickjs 的 EventEmitter，,需要的朋友可以參考一下
    2021-10-10
  • vue實現(xiàn)動態(tài)表格提交參數(shù)動態(tài)生成控件的操作

    vue實現(xiàn)動態(tài)表格提交參數(shù)動態(tài)生成控件的操作

    這篇文章主要介紹了vue實現(xiàn)動態(tài)表格提交參數(shù)動態(tài)生成控件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • Vue3根據(jù)動態(tài)字段綁定v-model的操作代碼

    Vue3根據(jù)動態(tài)字段綁定v-model的操作代碼

    最近在學習vue技術(shù)，開發(fā)表格的時候，想把表格做成組件，那查詢條件就需要動態(tài)生成，這就遇到一個問題，vue怎么動態(tài)給v-model變量值，本文通過實例代碼給大家介紹，對Vue3動態(tài)綁定v-model實例代碼感興趣的朋友一起看看吧
    2022-10-10
  • 詳解vue中多個有順序要求的異步操作處理

    詳解vue中多個有順序要求的異步操作處理

    這篇文章主要介紹了vue中多個有順序要求的異步操作處理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-10-10
  • Vue項目創(chuàng)建首頁發(fā)送axios請求的方法實例

    Vue項目創(chuàng)建首頁發(fā)送axios請求的方法實例

    這篇文章主要給大家介紹了關(guān)于Vue項目創(chuàng)建首頁發(fā)送axios請求的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2023-02-02
  • vuex存取值和映射函數(shù)使用說明

    vuex存取值和映射函數(shù)使用說明

    這篇文章主要介紹了vuex存取值和映射函數(shù)使用說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • html頁面引入vue組件之http-vue-loader.js解讀

    html頁面引入vue組件之http-vue-loader.js解讀

    這篇文章主要介紹了html頁面引入vue組件之http-vue-loader.js解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-04-04

最新評論