如何在 SPFx 中使用本地化资源？

Posted 2023-03-27

【中文标题】如何在 SPFx 中使用本地化资源？

【英文标题】：How to Use Localized Resources in SPFx?

【发布时间】：2018-10-25 09:25:52

【问题描述】：

我在 config.json 中定义了以下部分：

  "externals": 
    "jquery": 
      "path": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js",
      "globalName": "jQuery"
    ,
    "bootstrap": 
      "path": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js",
      "globalName": "jQuery"
    
  ,
  "localizedResources": 
    "SimpleContactFormWebPartStrings": "lib/webparts/simpleContactForm/loc/locale.js"
  

在我的 write-manifests.json 中，我有以下内容：

  "$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
  "cdnBasePath": "https://publiccdn.sharepointonline.com/mycompany.sharepoint.com/sites/super long ID for the CDN/PublicCDN/SimpleContactFormWebPart/"

但是，当我使用 gulp bundle --ship 和 gulp package-solution --ship 部署我的站点时，我得到了错误！

我还为 cdnBasePath 尝试了以下值：

https://publiccdn.sharepointonline.com/mycompany.sharepoint.com/sites/MySite/SubSite/SiteAssets/PublicCDN/ https://publiccdn.sharepointonline.com/mycompany.sharepoint.com/sites/MySite/SubSite/PublicCDN/

请注意：“PublicCDN”是 SiteAssets 库下的一个文件夹。

技术细节

[SPLoaderError.loadComponentError]： ***无法加载组件“63fefa07-d133-4d8b-beba-e4a961675cad”（SimpleContactFormWebPart）。原始错误：***无法加载 URL 'https://publiccdn.sharepointonline.com/avvenireinc.sharepoint.com/sites/14480077efdd98d1f7ac72f606b8b39cd9fcec4dbae7db146cdded624b48b5c09c1eee47/PublicCDN/SimpleContactFormWebPart/simplecontactformwebpart-simplecontactformwebpartstrings_en-us_42a0f6681da2dc33b87df83d67355874.js' 对于组件中的资源“SimpleContactFormWebPartStrings” '63fefa07-d133-4d8b-beba-e4a961675cad'（SimpleContactFormWebPart）。 出现网络问题。这可能是 HTTPS 的问题 证书。确保您拥有正确的证书。

如何定义我的 CDN 路径以便 SharePoint 可以找到本地化文件！？

编辑：删除本地化文件及其引用后，我现在收到以下错误，这似乎表明当我运行 gulp bundle --ship 时实际上没有部署任何内容：

[SPLoaderError.loadComponentError]: ***加载组件失败 “63fefa07-d133-4d8b-beba-e4a961675cad”（SimpleContactFormWebPart）。 原始错误：***无法加载 URL 'https://publiccdn.sharepointonline.com/mycompany.sharepoint.com/sites/MySite/SubSite/SiteAssets/PublicCDN/simple-contact-form-web-part_cea1554eb41a7c3ea6a3ee01291a7e17.js' 对于组件中的资源“simple-contact-form-web-part” '63fefa07-d133-4d8b-beba-e4a961675cad'（SimpleContactFormWebPart）。 出现网络问题。这可能是 HTTPS 的问题 证书。确保您拥有正确的证书。

【参考方案1】：

由于您使用的是 CDN 参考，我建议您使用SPComponentLoader。下面是 jQuery 示例（在此处替换您的实际 CDN 路径）： 首先导入模块import SPComponentLoader from '@microsoft/sp-loader' 现在添加这一行来加载你的 jQuery。这是异步调用 SPComponentLoader.loadScript('https://code.jquery.com/jquery-3.2.1.min.js')

SPComponentLoader.loadScript(
      'https://code.jquery.com/jquery-3.2.1.min.js'
    ).then(($: any) => 
      sayHello();
//access jQuery object with window['jQuery'] or declare variable inside your class as public jQuery: any, and assign $ as this.jQuery = $
)

【讨论】：

嗨，谢谢，但似乎 jQuery 和 Bootstrap 加载正确；是 SharePoint CDN 上的本地化文件未正确加载。你建议我如何加载它们？

我能知道您正在访问的那个文件是什么吗？是否与您的组织或公共 SP 相关？

是的，它是我的配置中列出的文件，路径为“lib/webparts/simpleContactForm/loc/locale.js”，其中 locale 为“en_us”。

据我所知这是不可能的。但是你能告诉我这个文件会做什么吗？似乎您正在使用特定于语言的文件。这将由 SPFx 框架自动处理。

这只是 MSDN (docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/…) 所述的标准语言环境文件。这个问题听起来类似于：techcommunity.microsoft.com/t5/SharePoint-Developer/…