vue项目与ue交互

文章正文

发布时间：2024-09-26 01:32

一，打包文件

要使vue文件在ue中正常使用，首先要打包后的index.html文件可以正常打开。所以先来配置vue项目。

1，找到vue.config.js文件，在module.exports里面配置 publicPath: "./"。

const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, publicPath: "./", // 关键，不然静态文件地址会有问题 }

2，找到你的路由文件 router/index.js，将路由的mode改成hash。

const router = new VueRouter({ mode: "hash", base: process.env.BASE_URL, routes, });

3，上述两步就可以让页面正常显示了，但现在有一个接口的问题，如果你是做的代理，需要添加.env.development和.env.production两个文件，里面内容如下

// .env.development VUE_APP_TITLE = 'title dev' VUE_APP_ENV = 'dev' VUE_APP_BASE_URL = '后台地址' // .env.production VUE_APP_TITLE = 'title pro' VUE_APP_ENV = 'pro' VUE_APP_BASE_URL = '后台地址'

上述步骤做完后，你打个包 npm run build，生成一个打包文件 dist，找到里面的index.html文件，直接双击打开，如果运行正常，那么你就成功了一半了。

二，页面与虚幻引擎

1，要连接两者的操作，你需要在项目的入口文件添加一个帮助函数。在public下找到 index.html文件。

如果你用的ue4，则添加下面这段代码：

如果你使用的ue5，则使用：

2，我使用的是ue5，但是传参写法都是一样的

// setForm 是你和ue约定好的接口，this.form是这个接口需要传的参数 ue5("setForm", this.form, res => { ...回调函数 });

3，页面接收ue5的数据：

// B端和C端交互的时候涉及到this指向的问题，所以通过Vuex来解决this的指向问题，同时注意UE5传过来的数据需要转义一下。 ue.interface.UE5CallFunc= (val) => { let obj = JSON.parse(val) let params = { name: '张三', } store.dispatch('getList', params) }

在这里，如果是在页面写，常常会报错，把他写在public的index.html，你会发现是可以用的，那么，可不可以直接在index.html里面写接收方法，而在需要的页面定义回调函数呢。试了一下，完全没问题。写法如下：

mounted() { window.init = this.init; // 这里一定要写，不然index.html拿不到你的回调 }, methods: { init(Json) { console.log(Json) ...这里写对ue返回数据的处理 }, }

然后在public下的index.html里面写：ue.interface.UE5CallFunc= function(Json){ init(Json) }，这里的 init()就是你 windows 出去的方法。

<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> <script> "object"!=typeof ue&&(ue={}),uuidv4=function(){return"10000000-1000-4000-8000- 100000000000".replace(/[018]/g,function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)})},ue5=function(r){return"object"!=typeof ue.interface||"function"!=typeof ue.interface.broadcast?(ue.interface={},function(t,e,n,o){var u,i;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=[t,"",r(n,o)],void 0!==e&&(u[1]=e),i=encodeURIComponent(JSON.stringify(u)),"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+i),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=i,document.location.hash=encodeURIComponent("[]")))}):(i=ue.interface,ue.interface={},function(t,e,n,o){var u;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=r(n,o),void 0!==e?i.broadcast(t,JSON.stringify(e),u):i.broadcast(t,"",u))});var i}(function(t,e){if("function"!=typeof t)return"";var n=uuidv4();return ue.interface[n]=t,setTimeout(function(){delete ue.interface[n]},1e3*Math.max(1,parseInt(e)||0)),n}); // getDescForm是和ue约定好的方法名，init是页面定义的回调方法 ue.interface.UE5CallFunc= function(Json) { init(Json) } </script> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div>  </body> </html> 三，问题报错 'ue' is not defind

如果你报错 ‘ue’ is not defind，不要急着去引用什么东西，其实编译已经过了，这个更多的是代码规范检查问题，找到你的.eslintrc.js文件，在代码规则里面添加 "no-undef": "off"

module.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended", ], parserOptions: { parser: "@babel/eslint-parser", }, rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", "vue/multi-word-component-names": "off", // 取消文件检测骆驼式变量名 "no-unused-vars": "off", // 关闭数据定义未使用校验 "no-undef": "off", // 关闭未定义检查 }, };

标签