一，打包文件

        要使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，则添加下面这段代码：

<script>
      "object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue &&                 (ue = {}), ue.interface = {}, ue.interface.broadcast = function (e, t) { if ("string" == typeof e) { var o = [e, ""]; void 0 !== t && (o[1] = t); var n = encodeURIComponent(JSON.stringify(o)); "object" == typeof history && "function" == typeof history.pushState ? (history.pushState({}, "", "#" + n), history.pushState({}, "", "#" + encodeURIComponent("[]"))) : (document.location.hash = n, document.location.hash = encodeURIComponent("[]")) } }) : function (e) { ue.interface = {}, ue.interface.broadcast = function (t, o) { "string" == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, "")) } }(ue.interface), (ue4 = ue.interface.broadcast);
      window.ue = ue
</script>

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

 <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});
</script>

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>
    <!-- built files will be auto injected -->
  </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", // 关闭未定义检查
  },
};

# vue.js # javascript # 前端 # ue5 # ue4
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟