vue项目中怎样嵌入其它项目的页面
作者：yumihe
这篇文章主要介绍了vue项目中怎样嵌入其它项目的页面问题,具有很好 的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue项目嵌入其它项目的页面
通过iframe嵌入，src的路径在static中（vue-cli3在public）配置
编译打包时，不会将static/public里的文件编译，前端可修改index.js里的url
方式一
创建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%">
<!--静态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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。