পেমেন্ট গেটওয়েগুলির জন্য আমাকে দুটি বাহ্যিক স্ক্রিপ্ট ব্যবহার করতে হবে। এখনই দু'জনকেই index.htmlফাইলে রাখা হয়েছে। তবে, আমি এই ফাইলগুলি শুরুতে লোড করতে চাই না। যখন ব্যবহারকারী কোনও নির্দিষ্ট উপাদান ( using router-view) খুলেন কেবল তখনই পেমেন্ট গেটওয়ে প্রয়োজন ।
এটি অর্জন করার উপায় আছে কি?
উত্তর:
এটি সমাধানের একটি সহজ এবং কার্যকর উপায়, এটি mounted()আপনার উপাদানটির পক্ষে আপনার বাহ্যিক স্ক্রিপ্ট যুক্ত করে । আমি আপনাকে গুগল রেকাপ্টা স্ক্রিপ্ট দিয়ে চিত্রিত করব :
<template>
.... your HTML
</template>
<script>
export default {
data: () => ({
......data of your component
}),
mounted() {
let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
document.head.appendChild(recaptchaScript)
},
methods: {
......methods of your component
}
}
</script>সূত্র: https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8
created()পদ্ধতিটি নথি পেতে পারে না, mounted()পরিবর্তে ব্যবহার করুন
recaptchaScript.async = trueএটি মাথায় যুক্ত করার আগে যুক্ত করুন ।
recaptchaScript.defer = trueকারও জন্য উপযুক্ত হতে পারে
আমি কিছু এইচটিএমএল টেমপ্লেট ডাউনলোড করেছি যা কাস্টম জেএস ফাইল এবং জ্যাকুরির সাথে আসে। আমাকে আমার অ্যাপ্লিকেশনটিতে এই জেএসগুলি সংযুক্ত করতে হয়েছিল। এবং ভ্যু দিয়ে চালিয়ে যান।
এই প্লাগ-ইন পাওয়া, এটি উভয় যা CDN মাধ্যমে এবং স্ট্যাটিক ফাইল থেকে বহিরাগত স্ক্রিপ্ট যোগ করার জন্য একটি পরিষ্কার উপায় https://www.npmjs.com/package/vue-plugin-load-script
// local files
// you have to put your scripts into the public folder.
// that way webpack simply copy these files as it is.
Vue.loadScript("/js/jquery-2.2.4.min.js")
// cdn
Vue.loadScript("https://maps.googleapis.com/maps/api/js")ওয়েবপ্যাক এবং ভ্যু লোডার ব্যবহার করে আপনি এরকম কিছু করতে পারেন
এটি উপাদান তৈরি করার আগে বাহ্যিক স্ক্রিপ্টটি লোড হওয়ার জন্য অপেক্ষা করে, তাই গ্লোবারবার ওয়ার্স ইত্যাদি উপাদানটিতে উপলব্ধ
components: {
SomeComponent: () => {
return new Promise((resolve, reject) => {
let script = document.createElement('script')
script.onload = () => {
resolve(import(someComponent))
}
script.async = true
script.src = 'https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places'
document.head.appendChild(script)
})
}
},আপনি কি ভ্যু ( https://github.com/vuejs-templates/webpack ) এর জন্য ওয়েবপ্যাক স্টার্টার টেম্পলেটগুলির একটি ব্যবহার করছেন ? এটি ইতিমধ্যে ভ্যু-লোডার ( https://github.com/vuejs/vue-loader ) এর সাথে সেট আপ করা হয়েছে । আপনি যদি কোনও স্টার্টার টেম্পলেট ব্যবহার না করে থাকেন তবে আপনাকে ওয়েবপ্যাক এবং ভ্যু-লোডার সেট আপ করতে হবে।
তারপরে আপনি importআপনার স্ক্রিপ্টগুলি প্রাসঙ্গিক (একক ফাইল) উপাদানগুলিতে করতে পারেন। তার আগে, আপনি আপনার উপাদানগুলিতে exportযা চান তা আপনার স্ক্রিপ্টগুলি থেকে নিতে importহবে।
ES6 আমদানি:
- https://developer.mozilla.org/en-US/docs/Web/ জাভা স্ক্রিপ্ট / রেফারেন্স / স্টেটমেন্টস / ইম্পোর্ট
- http://exploringjs.com/es6/ch_modules.html
~ সম্পাদনা করুন
these আপনি এই মোড়ক থেকে আমদানি করতে পারেন:
- https://github.com/matfish2/vue-stripe
- https://github.com/khoanguyen96/vue-paypal-checkout
আপনি আপনার মান উপাদানটির মাথায় স্ক্রিপ্টগুলি এবং অন্যান্য ট্যাগ যুক্ত করতে ভ্যু-হেড প্যাকেজটি ব্যবহার করতে পারেন ।
এটি এতটা সহজ:
var myComponent = Vue.extend({
data: function () {
return {
...
}
},
head: {
title: {
inner: 'It will be a pleasure'
},
// Meta tags
meta: [
{ name: 'application-name', content: 'Name of my application' },
{ name: 'description', content: 'A description of the page', id: 'desc' }, // id to replace intead of create element
// ...
// Twitter
{ name: 'twitter:title', content: 'Content Title' },
// with shorthand
{ n: 'twitter:description', c: 'Content description less than 200 characters'},
// ...
// Google+ / Schema.org
{ itemprop: 'name', content: 'Content Title' },
{ itemprop: 'description', content: 'Content Title' },
// ...
// Facebook / Open Graph
{ property: 'fb:app_id', content: '123456789' },
{ property: 'og:title', content: 'Content Title' },
// with shorthand
{ p: 'og:image', c: 'https://example.com/image.jpg' },
// ...
],
// link tags
link: [
{ rel: 'canonical', href: 'http://example.com/#!/contact/', id: 'canonical' },
{ rel: 'author', href: 'author', undo: false }, // undo property - not to remove the element
{ rel: 'icon', href: require('./path/to/icon-16.png'), sizes: '16x16', type: 'image/png' },
// with shorthand
{ r: 'icon', h: 'path/to/icon-32.png', sz: '32x32', t: 'image/png' },
// ...
],
script: [
{ type: 'text/javascript', src: 'cdn/to/script.js', async: true, body: true}, // Insert in body
// with shorthand
{ t: 'application/ld+json', i: '{ "@context": "http://schema.org" }' },
// ...
],
style: [
{ type: 'text/css', inner: 'body { background-color: #000; color: #fff}', undo: false },
// ...
]
}
})আরও উদাহরণের জন্য এই লিঙ্কটি দেখুন।
আপনি যদি vue.js উপাদান টেম্পলেটটিতে বাহ্যিক js স্ক্রিপ্টগুলি এম্বেড করার চেষ্টা করছেন তবে নীচে অনুসরণ করুন:
আমি এইভাবে আমার উপাদানটিতে একটি বাহ্যিক জাভাস্ক্রিপ্ট এম্বেড কোড যুক্ত করতে চেয়েছিলাম :
<template>
<div>
This is my component
<script src="https://badge.dimensions.ai/badge.js"></script>
</div>
<template>এবং ভ্যু আমাকে এই ত্রুটিটি দেখিয়েছিল:
টেমপ্লেটগুলি কেবলমাত্র রাজ্যটিকে ইউআইতে ম্যাপ করার জন্য দায়বদ্ধ হতে হবে। আপনার টেমপ্লেটগুলিতে পার্শ্ব-প্রতিক্রিয়াযুক্ত ট্যাগগুলি এড়াতে এড়াবেন, যেমন তাদের পার্স করা হবে না।
আমি এটি সমাধান করার
type="application/javascript"উপায়টি যুক্ত করেই ছিল ( জেএসের জন্য মাইম টাইম সম্পর্কে আরও জানতে এই প্রশ্নটি দেখুন ):
<script type="application/javascript" defer src="..."></script>
আপনি deferগুণটি লক্ষ্য করতে পারেন । আপনি আরও জানতে চাইলে কাইলের এই ভিডিওটি দেখুন
প্রতিশ্রুতি ভিত্তিক সমাধানের সাথে আপনার প্রয়োজনীয় স্ক্রিপ্টটি লোড করতে পারেন:
export default {
data () {
return { is_script_loading: false }
},
created () {
// If another component is already loading the script
this.$root.$on('loading_script', e => { this.is_script_loading = true })
},
methods: {
load_script () {
let self = this
return new Promise((resolve, reject) => {
// if script is already loading via another component
if ( self.is_script_loading ){
// Resolve when the other component has loaded the script
this.$root.$on('script_loaded', resolve)
return
}
let script = document.createElement('script')
script.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
script.async = true
this.$root.$emit('loading_script')
script.onload = () => {
/* emit to global event bus to inform other components
* we are already loading the script */
this.$root.$emit('script_loaded')
resolve()
}
document.head.appendChild(script)
})
},
async use_script () {
try {
await this.load_script()
// .. do what you want after script has loaded
} catch (err) { console.log(err) }
}
}
}দয়া করে নোট করুন যে this.$rootএটি একটি সামান্য হ্যাকি এবং এর পরিবর্তে আপনার বৈশ্বিক ইভেন্টগুলির জন্য একটি ভেক্স বা ইভেন্টহাব সমাধান ব্যবহার করা উচিত ।
আপনি উপরেরটিকে একটি উপাদান হিসাবে তৈরি করবেন এবং যেখানে প্রয়োজন সেখানে এটি ব্যবহার করবেন, এটি ব্যবহৃত হলে কেবল স্ক্রিপ্টটি লোড করবে।
পরিষ্কার উপাদান রাখতে আপনি মিশ্রণগুলি ব্যবহার করতে পারেন।
আপনার উপাদানটিতে বাহ্যিক মেশিন ফাইল আমদানি করুন।
Profile.vue
import externalJs from '@client/mixins/externalJs';
export default{
mounted(){
this.externalJsFiles();
}
}externalJs.js
import('@JSassets/js/file-upload.js').then(mod => {
// your JS elements
})babelrc (আমি এটি অন্তর্ভুক্ত করি, যদি কোনও আমদানিতে আটকে যায়)
{
"presets":["@babel/preset-env"],
"plugins":[
[
"module-resolver", {
"root": ["./"],
alias : {
"@client": "./client",
"@JSassets": "./server/public",
}
}
]
}মাউন্ট করা ট্যাগ তৈরির উপরের উত্তরটি ভাল, তবে এতে কিছু সমস্যা রয়েছে: আপনি যদি আপনার লিঙ্কটি একাধিকবার পরিবর্তন করেন তবে এটি বার বার ট্যাগ তৈরির পুনরাবৃত্তি করবে।
সুতরাং আমি এটি সমাধান করার জন্য একটি স্ক্রিপ্ট তৈরি করেছি এবং আপনি চাইলে ট্যাগটি মুছতে পারেন।
এটি খুব সহজ, তবে এটি নিজে তৈরি করার জন্য আপনার সময় বাঁচাতে পারে।
// PROJECT/src/assets/external.js
function head_script(src) {
if(document.querySelector("script[src='" + src + "']")){ return; }
let script = document.createElement('script');
script.setAttribute('src', src);
script.setAttribute('type', 'text/javascript');
document.head.appendChild(script)
}
function body_script(src) {
if(document.querySelector("script[src='" + src + "']")){ return; }
let script = document.createElement('script');
script.setAttribute('src', src);
script.setAttribute('type', 'text/javascript');
document.body.appendChild(script)
}
function del_script(src) {
let el = document.querySelector("script[src='" + src + "']");
if(el){ el.remove(); }
}
function head_link(href) {
if(document.querySelector("link[href='" + href + "']")){ return; }
let link = document.createElement('link');
link.setAttribute('href', href);
link.setAttribute('rel', "stylesheet");
link.setAttribute('type', "text/css");
document.head.appendChild(link)
}
function body_link(href) {
if(document.querySelector("link[href='" + href + "']")){ return; }
let link = document.createElement('link');
link.setAttribute('href', href);
link.setAttribute('rel', "stylesheet");
link.setAttribute('type', "text/css");
document.body.appendChild(link)
}
function del_link(href) {
let el = document.querySelector("link[href='" + href + "']");
if(el){ el.remove(); }
}
export {
head_script,
body_script,
del_script,
head_link,
body_link,
del_link,
}এবং আপনি এটি ব্যবহার করতে পারেন:
// PROJECT/src/views/xxxxxxxxx.vue
......
<script>
import * as external from '@/assets/external.js'
export default {
name: "xxxxxxxxx",
mounted(){
external.head_script('/assets/script1.js');
external.body_script('/assets/script2.js');
external.head_link('/assets/style1.css');
external.body_link('/assets/style2.css');
},
destroyed(){
external.del_script('/assets/script1.js');
external.del_script('/assets/script2.js');
external.del_link('/assets/style1.css');
external.del_link('/assets/style2.css');
},
}
</script>
......আপনি ভ্যু-লোডার এবং নিজের উপাদানগুলিকে তাদের নিজস্ব ফাইলগুলিতে কোড করতে পারেন (একক ফাইল উপাদান) components এটি আপনাকে উপাদানগুলির ভিত্তিতে স্ক্রিপ্ট এবং CSS অন্তর্ভুক্ত করার অনুমতি দেবে।
সবচেয়ে সহজ সমাধান হ'ল স্ক্রিপ্টটি যুক্ত করা index.html আপনার ভ্যু-প্রজেক্টের ফাইলটিতে
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-webpack</title>
</head>
<body>
<div id="app"></div>
<!-- start Mixpanel --><script type="text/javascript">(function(c,a){if(!a.__SV){var b=window;try{var d,m,j,k=b.location,f=k.hash;d=function(a,b){return(m=a.match(RegExp(b+"=([^&]*)")))?m[1]:null};f&&d(f,"state")&&(j=JSON.parse(decodeURIComponent(d(f,"state"))),"mpeditor"===j.action&&(b.sessionStorage.setItem("_mpcehash",f),history.replaceState(j.desiredHash||"",c.title,k.pathname+k.search)))}catch(n){}var l,h;window.mixpanel=a;a._i=[];a.init=function(b,d,g){function c(b,i){var a=i.split(".");2==a.length&&(b=b[a[0]],i=a[1]);b[i]=function(){b.push([i].concat(Array.prototype.slice.call(arguments,
0)))}}var e=a;"undefined"!==typeof g?e=a[g]=[]:g="mixpanel";e.people=e.people||[];e.toString=function(b){var a="mixpanel";"mixpanel"!==g&&(a+="."+g);b||(a+=" (stub)");return a};e.people.toString=function(){return e.toString(1)+".people (stub)"};l="disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
for(h=0;h<l.length;h++)c(e,l[h]);var f="set set_once union unset remove delete".split(" ");e.get_group=function(){function a(c){b[c]=function(){call2_args=arguments;call2=[c].concat(Array.prototype.slice.call(call2_args,0));e.push([d,call2])}}for(var b={},d=["get_group"].concat(Array.prototype.slice.call(arguments,0)),c=0;c<f.length;c++)a(f[c]);return b};a._i.push([b,d,g])};a.__SV=1.2;b=c.createElement("script");b.type="text/javascript";b.async=!0;b.src="undefined"!==typeof MIXPANEL_CUSTOM_LIB_URL?
MIXPANEL_CUSTOM_LIB_URL:"file:"===c.location.protocol&&"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js".match(/^\/\//)?"https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js":"//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";d=c.getElementsByTagName("script")[0];d.parentNode.insertBefore(b,d)}})(document,window.mixpanel||[]);
mixpanel.init("xyz");</script><!-- end Mixpanel -->
<script src="/dist/build.js"></script>
</body>
</html>
/public/index.htmlকরতে পারেন?