RequireJS跨域加载html模版后被转成JS问题分析及解决

阅读目录

• 问题描述
• 问题原因
• 解决方案
• 官方文档详细说明

回到顶部

问题描述

RequireJS跨域加载HTML模版失败，例如：
在a.com域名下请求CDN域名下的模版，text.js插件会把html文件转成html.js文件去加载，由于并没有生成html.js文件，所以会404

回到顶部

问题原因

• 打包后部分HTML模版无法内联，原因是同一模块引入的路径不一致
• 通过XHR请求HTML模版，浏览器同源策略，无法跨域

回到顶部

解决方案

• 打包后内联HTML模版，无需异步加载HTML文件，需要正确配置模版引用否则无法打包成内联模版，打包配置默认是内联模版
• 打包后生产模版的JS文件，即会生成一个模版的html.js文件，里面定义的是一个模块，返回html模版字符串，通过设置打包配置参数即可optimizeAllPluginResources: true。可以跨域解析，但产生大量冗余文件，可以单独上传，不好维护。

回到顶部

官方文档详细说明

https://github.com/requirejs/text