大佬教程收集整理的这篇文章主要介绍了Angular 2 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并创建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”
我没有测试这个解决方案,但你应该得到主要的想法.
以上是大佬教程为你收集整理的Angular 2 index.html – 与开发和生产不同全部内容,希望文章能够帮你解决Angular 2 index.html – 与开发和生产不同所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。