在jquery项目中嵌入vue项目的方法，以及遇到的问题

最新推荐文章于 2026-06-14 16:57:37 发布

原创最新推荐文章于 2026-06-14 16:57:37 发布 · 4.3k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了在jQuery项目中使用iframe嵌入Vue项目的方法，包括创建Vue项目、打包复制、配置地址等步骤。同时指出开发中实时查看Vue页面时会遇到跨域问题，需后台协助或配置Nginx，还提到Vue嵌入iframe时路由监听及数据请求的问题及解决办法。

因为我们知道vue项目打包完成后，就是一个index.html

我们在jquery项目中使用iframe嵌入vue项目

1.创建vue项目，根据路由写页面

2.将vue打包后的dist文件夹，复制到你的jquery目录下

3.配的地址跟自己vue项目访问地址一致即可，例如：“traffic/#/notice”

var html = '<div id="item' + gridItemIndex + '" class="item" style="background-color:#fff;">' +

                '<div class="item-content"><iframe width="' + awidth + '" height="' + aheight + '" id="itemIframe' + gridItemIndex + '" src="' + moduleUrl + '" frameborder="0"></iframe></div></div>';

            $('.grid').append(html);

4.然后将项目包丢给后台即可，或者让后台将地址指向你的环境，类似于（我的任务，日程，公告都是vue）

当开发过程中，常见问题

1.需要开发的过程中实时查看在jquery的项目中vue的页面情况，直接将地址指全（指向vue访问地址）

obj.moduleUrl=‘traffic/#/notice’ || ‘traffic/#/myTask’ || ···

var moduleUrl = 'http://ip:port/' + obj.moduleUrl

但是这样会遇到问题：当你需要取父页面在localstorage中的数据时，取不到，出现跨域

当你接口请求时，也会出现跨域

这时候需要后台协助，或者你本地自己起了ngnix，（配个地址即可）

location ^~ /traffic/{
#alias D:/workspace/portal/dyportalweb/webapp/;
proxy_pass http://ip:port/;
#alias C:/Users/Administrator/Desktop/dyportalweb/;
expires 5d;
}

我们在vue.config.js需要配置

devServer: {
    open: process.platform === "darwin",
    host: "自己的ip",
    port: 自己的端口,
    https: false,
    hotOnly: false,
    proxy: {
      "/gateway": {
        target: "http://ip:port/",
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          // '^/gateway': '/gateway',
          //   '^/gateway': ''
        }
      }
    },
    historyApiFallback: true,
    disableHostCheck: true,
    before: () => {}
  }

取值例如

2.我们vue是根据路由来判断进入那个页面的，有些公共参数是分页面请求的，vue项目嵌入iframe中，用watch监听发现from是空的，to才是你需要的路由信息（mouted中获取的路由this.$route.meta是undefined，而且组件的mouted方法先走导致报错）

所以我们使用watch监听路由变化根据meta信息判断请求数据，有数据再去渲染组件

 watch: {
    $route(to, from) {
      if (to.meta.isTask){
        this.initSwitch()
        this.getUrlByCode()
      }else{
        this.pageReady = true
      }
    },
  },

<router-view v-if="pageReady" />