在Vue3加载页面中，通过服务器渲染生成基础数据，然后配置到Vue3中。
//设置全局配置信息
work.config.globalProperties.appConfig = {
appDomain: "{:config('work.url')}",
appName: "{:config('work.title')}",
appAuthor: "{:config('work.author')}",
appDescription: "{:config('work.description')}",
appKeywords: "{:config('work.keywords')}",
};
vue-router配置动态加载视图文件
{
path: "/partner/record.html",
name: "partner_record",
meta: { title: "手艺人基础信息登记" },
component: () => import("/wexin/js/view/partner/record.js"),
}
vue-router动态更新文档标题
//动态更新页面标题
router.afterEach((to, from, failure) => {
document.title = to.meta.title
? to.meta.title
: work.config.globalProperties.appConfig.appName;
});
在组件中使用全局属性
//获取全局属性
const appConfig =
getCurrentInstance().appContext.config.globalProperties.appConfig;
//获取和提交数据服务器路径
const route = {
save: appConfig.appDomain + "private/partner/save.html",
get: appConfig.appDomain + "private/partner/get.html",
};
以上是我自己摸索的方法，不代表是最优写法，一切以解决问题为原则，创新最优解。
基本效果可以看上面的展示图片。