如何让 angular build 生成的 index.html 中使用 cdn 引用 js 文件,比如
<script src="runtime-es2015.7549caacf8c7d2028953.js" type="module"></script>
改成
<script src="https://common.cnblogs.com/runtime-es2015.7549caacf8c7d2028953.js" type="module"></script>
通过一个笨方法临时解决了,在应用启动时动态修改 index.html 文件,给引用的 js 文件加上 cdn base url
angular 应用 host 在 asp.net core 应用中,用下面的 C# 代码实现了
public class Startup
{
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
IFileProvider clientAppfileProvider = new PhysicalFileProvider(Path.Combine(env.ContentRootPath, "ClientApp", "dist"));
UpdateIndexHtml(clientAppfileProvider);
}
private void UpdateIndexHtml(IFileProvider fileProvider)
{
var path = fileProvider.GetFileInfo("index.html").PhysicalPath;
var content = File.ReadAllText(path);
var newContent = Regex.Replace(
content,
"(<script src=\")(runtime|main|polyfills)(-.*?\")",
"$1https://account-cdn.cnblogs.com/$2$3");
File.WriteAllText(path, newContent);
}
}
要让 Angular build 生成的 index.html 使用 CDN 引用 JS 文件,需要进行以下步骤:
例如:
"options": {
...
"deployUrl": "https://common.cnblogs.com/",
...
}
npm install --save-dev ngx-build-plus
"scripts": {
"build:prod": "ng build --prod --output-hashing none --single-bundle true --extra-webpack-config ./extra-webpack.config.js"
}
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.NormalModuleReplacementPlugin(
/environments\/environment\.ts/,
'./environment.prod.ts'
)
]
};
export const environment = {
production: true,
baseUrl: 'https://common.cnblogs.com'
};
注意:这些步骤的具体实现可能会因为 Angular 版本、插件版本、项目配置等因素而略有不同。如果出现问题,可以先查看 Angular 官方文档或者插件的文档,或者咨询 Angular 的开发者社区。
要让 Angular 构建生成的 index.html 文件中使用 CDN 引用 JS 文件,你可以通过修改 Angular 的构建配置来实现。以下是一般的步骤:
打开 angular.json 文件:在你的 Angular 项目中,找到 angular.json 文件,并打开它。
寻找 "architect" 部分:在 angular.json 文件中,寻找到 "architect" 部分。其中包含了构建和部署的配置信息。
修改构建配置:在 "architect" 部分下,找到 "build" 配置,它对应着构建命令。通常是类似下面的代码片段:
json
Copy code
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
// 构建选项
},
// 其他配置
},
// 其他配置
}
添加 CDN 配置:在 "options" 部分下的 "scripts" 字段中,可以添加你想要引用的 CDN 的 JS 文件。例如:
json
Copy code
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"scripts": [
{
"input": "https://cdn.example.com/runtime-es2015.7549caacf8c7d2028953.js",
"type": "module"
},
// 其他 CDN 引用
],
// 其他构建选项
},
// 其他配置
},
// 其他配置
}
请注意,这里我们将 "input" 字段的值设置为 CDN 的 URL,同时指定了 "type" 字段为 "module",以确保正确引入 ES2015 模块。你可以根据需要添加其他的 CDN 引用。
运行构建命令:在命令行中运行 Angular 的构建命令,以生成使用 CDN 引用的 index.html 文件:
bash
Copy code
ng build
构建完成后,生成的 index.html 文件中的脚本引用应该已经使用了 CDN 的 URL。
请注意,在使用 CDN 引用文件时,你需要确保 CDN 的 URL 是有效可用的,以便在用户访问应用时能够正确加载所需的 JS 文件。
希望这些步骤能够帮助你实现使用 CDN 引用 JS 文件的需求。如有其他问题,请随时提问。
相关链接 https://github.com/angular/angular-cli/issues/23765
– dudu 1年前