odoo使用iframe嵌入vue

使用VUE进行前后端分离项目，除了利用“ir.actions.act_url”直接跳转路由的方式，还可以利用iframe将项目嵌入到odoo中，这样就可以直接在odoo里面查看vue项目 效果如图：

（因为博客的很多功能还没完善，这里只是进行简单的展示）

1. 创建菜单

<menuitem id="menu_watch_blog_user_root"

    name="进入博客管理"

    parent="menu_blog_user_root"

    action="action_watch_my_blog"

    sequence="60"

/>

2. 创建action：这里用到的时是"ir.actions.client"

<record id="action_watch_my_blog" model="ir.actions.client">

    <field name="name">MyBlog</field>

    <field name="tag">vue_my_blog_watch</field>

</record>

3. 创建对应的JS代码

odoo.define('my_blog_watch', function (require) {
    "use strict";
 
    var core = require('web.core');
    var AbstractAction = require('web.AbstractAction');
 
    var VueMyBlogWatch = AbstractAction.extend({
        template: 'o_vue_mmy_blog_watch',
 
        init: function (parent, data) {
            return this._super.apply(this, arguments);
        },
        start: function () {
            return true;
        },
 
    });
 
    // 对应client_action中的tag
    core.action_registry.add('vue_my_blog_watch', VueMyBlogWatch);
 
});

4. 创建相应的模板：其src 就是vue项目跳转的路径

<template xml:space="preserve">
    <t t-name="o_vue_mmy_blog_watch">
        <iframe marginheight="0" marginwidth="0"
                width="100%" height="100%"
                src="http://localhost:80"
                framborder="0" allowfullscreen="True">
 
        </iframe>
    </t>
</template>

5. 将JS文件引入

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="assets_end" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/blog_user/static/js/ifram_my_blog.js" />
        </xpath>
    </template>
</odoo>

6. 将Qweb模板在manifest.py配置文件引入

'qweb': ['static/xml/vue_my_blog_template.xml'],

代码比较简单，有兴趣的同学可以很如研究一下，博主只是简单的记录一下，毕竟有时候还是回碰到这种需求的。