vue项目与ue交互

一，打包文件

        要使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 出去的方法。

三，问题报错  '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", // 关闭未定义检查
  },
};