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)文章
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()的使用及解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在Vue.js中頁面跳轉(zhuǎn)是前端開發(fā)中常見的需求,Vue提供了多種頁面跳轉(zhuǎn)方式,這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)方式的常見方式以及區(qū)別分析的相關(guān)資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了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)生成控件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue3根據(jù)動態(tài)字段綁定v-model的操作代碼
最近在學(xué)習(xí)vue技術(shù)，開發(fā)表格的時候，想把表格做成組件，那查詢條件就需要動態(tài)生成，這就遇到一個問題，vue怎么動態(tài)給v-model變量值，本文通過實例代碼給大家介紹，對Vue3動態(tài)綁定v-model實例代碼感興趣的朋友一起看看吧2022-10-10
這篇文章主要介紹了vue中多個有順序要求的異步操作處理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue項目創(chuàng)建首頁發(fā)送axios請求的方法實例
這篇文章主要給大家介紹了關(guān)于Vue項目創(chuàng)建首頁發(fā)送axios請求的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vuex存取值和映射函數(shù)使用說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
html頁面引入vue組件之http-vue-loader.js解讀
這篇文章主要介紹了html頁面引入vue組件之http-vue-loader.js解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04