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下
嵌入代碼
<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)文章
這篇文章主要為大家詳細(xì)介紹了vue的路由，路由的本質(zhì)就是一種對應(yīng)關(guān)系，比如說我們在url地址中輸入我們要訪問的url地址之后，瀏覽器要去請求這個url地址對應(yīng)的資源，本文具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼
項目上有一個需求,頁面上有50、60個數(shù)據(jù)變量,是依次排序遞增的變量,中間有個別變量用不到,不想把這些變量直接定義在data() { }內(nèi),這篇文章主要介紹了vue生成初始化名字相近的變量并放到數(shù)組中的示例代碼,需要的朋友可以參考下2024-08-08
Vue對Element中el-tab-pane添加@click事件無效問題解決
這篇文章主要給大家介紹了關(guān)于Vue對Element中el-tab-pane添加@click事件無效問題的解決辦法,文中通過圖文以及代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue非父子組件通信問題及解決方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
在許多Web應(yīng)用程序中，日歷是一個常見的組件，它通常用于顯示日期、安排會議、查看活動等，在Vue中，我們可以使用第三方庫來輕松實現(xiàn)日歷功能，也可以手動編寫代碼來實現(xiàn)日歷的展示和操作，本文將介紹如何使用vue-calendar和手動編寫代碼來實現(xiàn)日歷功能2023-07-07
webpack安裝配置與常見使用過程詳解（結(jié)合vue）
這篇文章主要介紹了webpack安裝配置與常見使用過程，主要結(jié)合vue實現(xiàn)，通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
這篇文章主要介紹了antd form表單數(shù)據(jù)回顯操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue定時器設(shè)置和關(guān)閉頁面時關(guān)閉定時器方式
這篇文章主要介紹了vue定時器設(shè)置和關(guān)閉頁面時關(guān)閉定時器方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
前端上傳文件很大時,會出現(xiàn)各種問題,比如連接超時了,網(wǎng)斷了,都會導(dǎo)致上傳失敗,這個時候就需要將文件切片上傳,下面我們就來學(xué)習(xí)一下如何使用vue實現(xiàn)大文件切片上傳吧2023-11-11
vue cli如何配置開發(fā)環(huán)境下的sourcemap
這篇文章主要介紹了vue cli如何配置開發(fā)環(huán)境下的sourcemap問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06