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頁面

失敗原因：

代碼結構不同，需要放到指定位置

解決：

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

嵌入代碼

<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>

總結

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

您可能感興趣的文章:

vue-create創(chuàng)建VUE3項目詳細圖文教程
create-vue是Vue官方新的腳手架工具,底層切換到了vite(下一代前端工具鏈),為開發(fā)提供極速響應,下面這篇文章主要給大家介紹了關于vue-create創(chuàng)建VUE3項目的相關資料,需要的朋友可以參考下
2024-03-03
Vue中Vue.extend()的使用及解析
這篇文章主要介紹了Vue中Vue.extend()的使用及解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue跳轉方式的常見方式以及區(qū)別分析
在Vue.js中頁面跳轉是前端開發(fā)中常見的需求,Vue提供了多種頁面跳轉方式,這篇文章主要給大家介紹了關于vue跳轉方式的常見方式以及區(qū)別分析的相關資料,需要的朋友可以參考下
2024-02-02
JavaScript 沙箱探索
這篇文章主要介紹了JavaScript 沙箱探索，沙箱是基于 event bus 形式的通信實現上層的功能，文章的例子選擇接口實現了 web worker 與 quickjs 的 EventEmitter，,需要的朋友可以參考一下
2021-10-10
vue實現動態(tài)表格提交參數動態(tài)生成控件的操作
這篇文章主要介紹了vue實現動態(tài)表格提交參數動態(tài)生成控件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue3根據動態(tài)字段綁定v-model的操作代碼
最近在學習vue技術，開發(fā)表格的時候，想把表格做成組件，那查詢條件就需要動態(tài)生成，這就遇到一個問題，vue怎么動態(tài)給v-model變量值，本文通過實例代碼給大家介紹，對Vue3動態(tài)綁定v-model實例代碼感興趣的朋友一起看看吧
2022-10-10
詳解vue中多個有順序要求的異步操作處理
這篇文章主要介紹了vue中多個有順序要求的異步操作處理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-10-10
Vue項目創(chuàng)建首頁發(fā)送axios請求的方法實例
這篇文章主要給大家介紹了關于Vue項目創(chuàng)建首頁發(fā)送axios請求的相關資料,文中通過圖文以及實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2023-02-02
vuex存取值和映射函數使用說明
這篇文章主要介紹了vuex存取值和映射函數使用說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
html頁面引入vue組件之http-vue-loader.js解讀
這篇文章主要介紹了html頁面引入vue組件之http-vue-loader.js解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04