vue項(xiàng)目中怎樣嵌入其它項(xiàng)目的頁(yè)面
更新時(shí)間：2023年10月10日 16:48:46 作者：yumihe
這篇文章主要介紹了vue項(xiàng)目中怎樣嵌入其它項(xiàng)目的頁(yè)面問(wèn)題,具有很好 的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue項(xiàng)目嵌入其它項(xiàng)目的頁(yè)面
通過(guò)iframe嵌入，src的路徑在static中（vue-cli3在public）配置
編譯打包時(shí)，不會(huì)將static/public里的文件編譯，前端可修改index.js里的url
方式一
創(chuàng)建index.js，在入口頁(yè)面中引入
static/urls/index.js
window.urlsPath = {
statisticsUrl: 'http://xx.xx.xx.xx:80'
}入口index.html
// 注意引入js時(shí)的路徑 // 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
}方式二
通過(guò)在main.js中請(qǐng)求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頁(yè)面
問(wèn)題描述：
向vue項(xiàng)目中嵌入html頁(yè)面
失敗原因：
代碼結(jié)構(gòu)不同，需要放到指定位置
解決：
把本地html、css\js\img都放到與src同級(jí)的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>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue的路由，路由的本質(zhì)就是一種對(duì)應(yīng)關(guān)系，比如說(shuō)我們?cè)趗rl地址中輸入我們要訪問(wèn)的url地址之后，瀏覽器要去請(qǐng)求這個(gè)url地址對(duì)應(yīng)的資源，本文具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼
項(xiàng)目上有一個(gè)需求,頁(yè)面上有50、60個(gè)數(shù)據(jù)變量,是依次排序遞增的變量,中間有個(gè)別變量用不到,不想把這些變量直接定義在data() { }內(nèi),這篇文章主要介紹了vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼,需要的朋友可以參考下2024-08-08
Vue對(duì)Element中el-tab-pane添加@click事件無(wú)效問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于Vue對(duì)Element中el-tab-pane添加@click事件無(wú)效問(wèn)題的解決辦法,文中通過(guò)圖文以及代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue非父子組件通信問(wèn)題及解決方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
在許多Web應(yīng)用程序中，日歷是一個(gè)常見(jiàn)的組件，它通常用于顯示日期、安排會(huì)議、查看活動(dòng)等，在Vue中，我們可以使用第三方庫(kù)來(lái)輕松實(shí)現(xiàn)日歷功能，也可以手動(dòng)編寫代碼來(lái)實(shí)現(xiàn)日歷的展示和操作，本文將介紹如何使用vue-calendar和手動(dòng)編寫代碼來(lái)實(shí)現(xiàn)日歷功能2023-07-07
webpack安裝配置與常見(jiàn)使用過(guò)程詳解（結(jié)合vue）
這篇文章主要介紹了webpack安裝配置與常見(jiàn)使用過(guò)程，主要結(jié)合vue實(shí)現(xiàn)，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了antd form表單數(shù)據(jù)回顯操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue定時(shí)器設(shè)置和關(guān)閉頁(yè)面時(shí)關(guān)閉定時(shí)器方式
這篇文章主要介紹了vue定時(shí)器設(shè)置和關(guān)閉頁(yè)面時(shí)關(guān)閉定時(shí)器方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
前端上傳文件很大時(shí),會(huì)出現(xiàn)各種問(wèn)題,比如連接超時(shí)了,網(wǎng)斷了,都會(huì)導(dǎo)致上傳失敗,這個(gè)時(shí)候就需要將文件切片上傳,下面我們就來(lái)學(xué)習(xí)一下如何使用vue實(shí)現(xiàn)大文件切片上傳吧2023-11-11
vue cli如何配置開發(fā)環(huán)境下的sourcemap
這篇文章主要介紹了vue cli如何配置開發(fā)環(huán)境下的sourcemap問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06