다른 vue 앱에 vue 앱을 포함하려면 어떻게 해야 합니까?
저는 현재 다른 고객 사이트에 포함될 위젯을 생성해 달라는 요청을 받고 있습니다.
예를 들어 다음과 같습니다.
두 가지 제약사항이 있습니다.
- iframe 사용은 금지되어 있습니다.
- 고객님의 웹사이트는 모든 기술(PHP, React, ANGular, Vue.js, JQuery 등)에서 실행할 수 있습니다.
요청하신 위젯은 인터랙티브해야 하기 때문에 javascript framwork를 사용하여 개발하고 싶었습니다(Vue.js를 생각했습니다).
다만, 고객의 Web 사이트가 이미 다른 버전의 Vue.js를 사용하고 있는 경우 등, 몇개의 경합(또는 고객의 Web 사이트 파손)이 발생할 가능성이 있다고 생각했습니다.
해결책을 찾고 고민하는 데 몇 시간을 소비했지만, iframe을 사용할 것으로 예상했지만 아무것도 찾지 못했습니다.
=> 다른 Vue.js 앱(또는 React, Angular 등)에 Vue.js 앱을 포함할 수 있는 방법이 있습니까?
잘 부탁드립니다.
중요 편집:
이 을 썼기 전체를 로 묶을 수 더 을 찾았습니다..js파일, 여기에 기재되어 있습니다.
앱이 인스턴스화되는 시기와 Vue를 포함해야 하는지 여부에 대한 더 많은 제어가 필요한 경우, 원래의 답변은 다음과 같습니다(더 낫다고 주장하는 것이 아니라, 저는 다른 대안이 없는 상황에서 앱을 작성했을 뿐이고, 작동했습니다).
첫 번째 답변:
현재 다니고 있는 회사는 일반적으로 고객의 웹 페이지에 임베디드 앱을 제공하고 있습니다.주의: 다음 예시는 다음과 같습니다..ts..js.
다양한 방법(Vue는 매우 유연함)을 테스트한 결과, 다음과 같이 되었습니다.
이 방법은 에서 영감을 얻었다.mapbox-gl에ue에에ue ueue ueue ueue ueue ue에 ue ueue
앱 ), 하세요. 전체 앱을 깨끗한 JS 클래스로 내보내고(단일 스크립트를 통해 가져오기) 실행합니다.
new SomeClass(selector, config);
위해 저는 '이러다', '이러다', '만,someClass.ts 것)main.ts통), 、 단, 、 ,,다 다다다 다다 。
import Vue from 'vue';
import App from './App.vue';
import store from './store';
import i18n from '@/plugins/i18n';
import VA from 'vue-axios';
import axios from 'axios';
import store from './store';
...
Vue.use(VA, axios);
Vue.config.productionTip = false;
const Instance = new Vue({
store,
i18n,
components: { App },
data: () => ({ config: {} }),
render: function(createElement) {
return createElement('app', {
props: { config: this.config }
});
}
});
export default class SomeClass {
constructor(selector: string, config: SomeClassConfig) {
Vue.set(Instance, 'config', {
...config,
// id is optional. but allows setting the app's `id` dynamically to same `id`
// as the context page placeholder (which app replaces), for consistency
// for this, you have to assign `config.id` to App's `$el` in its `mounted()`
id: selector.replace('#', '')
// or document.querySelector(selector).id || 'someClassApp'
});
Instance.$mount(selector);
return Instance;
}
}
// optional exports, used for type inheritance throughout the app
export const { $http, $t, $store } = Instance;
주의: 이 점을 명확히 합니다.상기의 수입은 필요 없습니다(예:axios,i18netc ... etc ... etc ... ......... - - - 이건 입니다.)- 예시에 불과합니다.)가 하고 싶은 대로 해main.ts (오류)main.js으로 동작하고 는 정상적으로 동작하고 있습니다.에 '보다'를 ,Instance config,및 에서 한 , config ", " " " " " " " 。Instance.
되어 있습니다(「이러다」(「이러다」)를 ).build아래에 지정된 명령어). 단, 이 명령어에도 대응해야 합니다.main.ts서비스를 제공할 때 이 클래스를 가져오고 앱을 렌더링하려면:
import SomeClass from '@/someClass';
export default new SomeClass('#devhook', {
// config object
});
const app = document.querySelector('#devhook');
if (app instanceof HTMLElement) {
app.addEventListener('some-event', function(e) {
if (e instanceof CustomEvent) {
console.log(e.detail);
// you can test events emitted for context app here...
}
});
}
그리고.public/index.html다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="./favicon.ico">
<!-- VueJS -->
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="devhook"></div>
<!-- built files will be auto injected -->
</body>
</html>
빌드 명령어는 다음과 같습니다.
vue-cli-service build --target lib --name SomeClass --inline-css --inline-vue src/someClass.ts
내보내기 주의사항src/someClass.ts. 결국엔 파일 이름이 붙게 됩니다.SomeClass.umd.js.
또한 이 설정을 에 추가config.vue.js:
configureWebpack: {
output: {
libraryExport: 'default'
}
}
를 사용하지 않고 수업을 시작할 수 있습니다..default()콘텍스트페이지에서 Import 할 때 사용합니다.위의 webpack 옵션이 없으면 다음과 같이 시작해야 합니다.
new Someclass.default(selector, config);
다른 건 다 평범해요
이제 컨텍스트 페이지에서는 다음 명령어를 Import하기만 하면 됩니다..umd.js, 앱 인스턴스화
new SomeClass(selector, config)
렌더링된 요소에 하나 이상의 청취자를 추가합니다.
그.umd.js외부 서버로부터 export를 처리할 수 있으며, 당연히 외부 서버로부터 Import할 수 있습니다.npm패키지.
그럴 필요 없어--inline-css그리고.--inline-vue만약 따로(i.e:뷰 이미 맥락 페이지에 존재할 수 있)그들을 로드할 더 현명하다.또한, 종종 도서관은 이미 맥락 페이지(당신은 가능한 한 많은 libs 다시 사용하고 싶어)에서, 사용에 의존하고 있는 경우가 빈번합니다.vue.config.js:
configureWebpack: {
externals: {
lodash: 'window._'
}
}
이렇게 할 때, 대본 lodash/jquery/whatever cdn 곳을 가리키고 추가하는 것을 기억하세요.public/index.html때 serving/developing 컨텍스트 페이지 것이기 때문에 있어서 적재된다.
마침내,demo.html(그 괴롭히다. 선 보이는 사용되), 다음과 같이 보인다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Some Class App Demo</title>
<link rel="shortcut icon" href="./favicon.ico"/>
<!-- also works when served from a different domain -->
<script src="./SomeClass.umd.min.js"></script>
<link rel="stylesheet" href="./SomeClass.css">
</head>
<body>
<div id="SomeClassApp"></div>
<script>
const config = {
// whatever
};
const app = new SomeClass('#SomeClassApp', config);
if (app.$el instanceof HTMLElement) {
app.$el.addEventListener('some-event', function(e) {
if (e instanceof CustomEvent) {
console.log(e.detail);
}
});
}
</script>
</body>
물론, 여러분은, 앱의 대본은 전에(모든 외관을 추가해야 할 것이다../SomeClass.umd.min.js), 사용했다.하지 마defer그들. 이 앱은 학생들이 로드된 것으로 예상한다.window때 inits.때 inits.
충돌을, 당신은 없어야 한다.뷰 고도로 미성년자에 걸쳐 여러분은 단지 컨텍스트를 페이지의 뷰(대신 inlining의)를 사용할 수 있는 호환성이 있다.또한, 뷰 2구문 완전히 뷰 3(처럼 뷰 3에 그들에게 어떤 변화를 시행하지 않고 뷰 2앱 운영에 우리가 보게 되어요)과 호환될 예정이야.
당신은 단순히 JS을 사용해 풀 수 있다.저는 다른 웹 사이트에 유사한 과제는 내 뷰 위젯 추가하지 않 있다.다음으로 수행할 수 있는 코드 예를 나타냅니다.
const appendWidget = () => new Promise((resolve, reject) => {
let e = document.createElement("div")
e.setAttribute("id", "widgetToAppend");
document.body.appendChild(e);
let app = new Vue({
el: "#widgetToAppend",
template: `<div>YOUR COMPONENTS</div>`
})
resolve(app);
})
문제는 버전이 다른 경우(클라이언트는 Vue 2.5를 사용하고, 사용자는 2.6을 사용)에 발생할 가능성이 높다고 생각합니다.
예전에 리액트랑 뷰랑 마주친 적이 있어요
이것이 제가 Svelte를 사용하는 첫 번째 이유일 것입니다.프로젝트가 의존관계/위젯으로 사용되는 것을 알고 있습니다.
Vue에 익숙해지면 금방 집에 갈 수 있을 거예요.주목할 만한 차이점은 프레임워크가 아닌 기술적으로 하나의 언어이기 때문에 프레임워크에 의존하지 않는다는 것입니다.
언급URL : https://stackoverflow.com/questions/61899394/how-to-include-vue-app-inside-another-vue-app
'sourcecode' 카테고리의 다른 글
| 버블 정렬이 GCC의 -O2보다 -O3의 -O3의 -O2일 때 (0) | 2022.07.27 |
|---|---|
| VM을 사용할 시기 또는 이 항목을 선택합니다.Vue.js로 (0) | 2022.07.26 |
| 비트맵 개체를 액티비티 간에 전달하려면 어떻게 해야 합니까? (0) | 2022.07.26 |
| 사후 대응 업데이트에 vuex를 사용하는 방법 (0) | 2022.07.26 |
| 루트 요소를 들여쓴 후에만 Vue.js가 올바르게 렌더링되지 않아야 함 (0) | 2022.07.26 |