Angular 2 index.html – 与开发和生产不同

发布时间：2020-12-17 17:54:28 所属栏目：安全来源：网络整理

导读：我需要在我的angular 2项目中实现snipcart. 下面的脚本标记需要插入到我的index.html文件的头部. 但是,data-api-key因开发和生产环境而异.我该怎么做？ script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" id="snipcart" data-api-key="insert-

我需要在我的angular 2项目中实现snipcart.
下面的脚本标记需要插入到我的index.html文件的头部.

但是,data-api-key因开发和生产环境而异.我该怎么做？

<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" 
        id="snipcart" 
        data-api-key="insert-your-key-here">
</script>

java.html文件中的脚本标记很重要,snipcart.com会出于安全考虑进行检查.

我试图在运行时这样做：
在index.html文件中添加不带src-url的脚本标记,然后在main.ts中使用正确的api-key值和src-url更新标记属性.

这样,snipcart会使用正确的密钥运行,但来自snipcart.com的验证失败.

所以我需要在编译时设置api-key.我的index.html需要在开发和生产模式上有所不同.

我的项目是使用angular cli创建的：

"angular-cli": "1.0.0-beta.19-3","@angular/common": "~2.1.0","@angular/compiler": "~2.1.0","@angular/core": "~2.1.0","@angular/forms": "~2.1.0","@angular/http": "~2.1.0","@angular/platform-browser": "~2.1.0","@angular/platform-browser-dynamic": "~2.1.0","@angular/router": "~3.1.0",

谢谢,

干杯

格尔德

解决方法

在部署应用程序之前,您可以使用Gulp插入API密钥.
您需要创建一个index2.html,用于在部署时使用良好的api密钥创建真正的index.html.
在index2.html中,将SNIPCART_API_KEY放在API密钥所在的位置.

安装Gulp并创建gulpfile.js

var gulp = require('gulp');
var package = require('./package.json');
var replace = require('gulp-replace');
var argv = require('yargs').argv;
var gulpif = require('gulp-if');
var rename = require('gulp-rename');

gulp.task('snipcart',function() {
   gulp.src(['index2.html'])
    .pipe(gulpif(argv.production,replace("SNIPCART_API_KEY",package.config.prod.snipcart_api_key)))
    .pipe(gulpif(!argv.production,package.config.dev.snipcart_api_key)))
    .pipe(rename('index.html'))
    .pipe(gulp.dest('.''))
});

gulp.task('default',['snipcart']);

这个Gulp文件应该用你的package.json中的好键替换SNIPCART_API_KEY并创建一个index.html.

要在需要时调用Gulp任务,可以在package.json中添加一些脚本.
您需要在部署过程中调用npm run prod,以便使用生产密钥创建index.html.

的package.json

{
 //...
 "scripts": {
    "start": "concurrently "npm run tsc:w" "npm run lite" ","prod": "gulp default --production","dev": "gulp default"
    //...
  }
 //...
  "config" : { 
    "dev": { "snipcart_api_key" : "YOUR_KEY" },"prod": { "snipcart_api_key" : "YOUR_KEY" }
  }
}

您还可以创建其他脚本,例如“start-dev”：“gulp default&& npm npm start”

我没有测试这个解决方案,但你应该得到主要的想法.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!