Vue-Projekt interagiert mit ue

1. Paketdatei

        Damit die vue-Datei normal in ue funktioniert, muss die gepackte index.html-Datei zuerst normal geöffnet werden. Lassen Sie uns also zuerst das vue-Projekt konfigurieren.

1. Suchen Sie die Datei vue.config.js und konfigurieren Sie publicPath: „./“ in module.exports.

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: "./", // 关键，不然静态文件地址会有问题
}

2. Suchen Sie Ihre Routing-Datei router/index.js und ändern Sie den Routing-Modus in Hash.

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

3. Die obigen zwei Schritte können dazu führen, dass die Seite normal angezeigt wird, aber jetzt gibt es ein Schnittstellenproblem. Wenn Sie ein Agent sind, müssen Sie zwei Dateien hinzufügen, .env.development und .env.production.Die Inhalte sind wie folgt

// .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 = '后台地址'

        Nachdem die obigen Schritte abgeschlossen sind, lassen Sie ein Paket npm run build erstellen, um eine Paketdatei dist zu generieren, suchen Sie die darin enthaltene Datei index.html und doppelklicken Sie darauf, um sie zu öffnen.Wenn sie normal ausgeführt wird, sind Sie halbwegs erfolgreich.

2. Seiten und Unreal Engine

1. Um die beiden Operationen zu verbinden, müssen Sie der Eingangsdatei des Projekts eine Hilfsfunktion hinzufügen. Suchen Sie die Datei index.html unter public.

        Wenn Sie ue4 verwenden, fügen Sie den folgenden Code hinzu:

<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>

        Wenn Sie ue5 verwenden, verwenden Sie:

 <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. Ich verwende ue5, aber die Methode zum Übergeben von Parametern ist dieselbe

// setForm 是你和ue约定好的接口，this.form是这个接口需要传的参数

ue5("setForm", this.form, res => {
    ...回调函数
});

3. Die Seite erhält die Daten von ue5:

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

Hier, wenn Sie es auf die Seite schreiben, werden Sie oft einen Fehler melden. Schreiben Sie es in die öffentliche index.html, und Sie werden feststellen, dass es verwendet werden kann. Dann können Sie die empfangende Methode direkt in index.html schreiben, und auf der gewünschten Seite die Callback-Funktion definieren. Ausprobiert, überhaupt kein Problem. Es ist wie folgt geschrieben:

  mounted() {

    window.init = this.init; // 这里一定要写，不然index.html拿不到你的回调

  },
  methods: {

    init(Json) {
      console.log(Json)
      ...这里写对ue返回数据的处理
    },

}

        Schreiben Sie dann in index.html unter public: ue.interface.UE5CallFunc= function(Json){ init(Json) }, wobei init() der Weg ist, um aus Ihren Fenstern herauszukommen.

<!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>

Drittens, das Problem meldet einen Fehler „ue“ ist nicht definiert

        Wenn Sie einen Fehler melden „ue“ ist nicht definiert, beeilen Sie sich nicht, etwas zu zitieren. Tatsächlich ist die Kompilierung bestanden. Dies ist eher ein Problem bei der Überprüfung der Codespezifikation. Finden Sie Ihre .eslintrc.js-Datei und fügen Sie „no“ hinzu die Coderegel -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", // 关闭未定义检查
  },
};