发布时间:2023-04-03 16:00
要使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,不要急着去引用什么东西,其实编译已经过了,这个更多的是代码规范检查问题,找到你的.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", // 关闭未定义检查
},
};