vuex 스토어가 빌드에 포함되도록 하려면 어떻게 해야 합니까?
vue cli 3을 사용하는 Vue 어플리케이션이 있습니다.이 가이드에 따라 앱을 빌드합니다.vue-cli-service build --target wc --name my-element [entry]
출력을 테스트하기 위해 index.html 파일이 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<my-project></my-project>
<script src="https://unpkg.com/vue"></script>
<script src="my-project.min.js"></script>
</body>
</html>그러나 브라우저에서 index.html을 열면 다음 오류가 나타납니다.
my-project.min.js의 다음 섹션을 나타냅니다.
main.js:
import "@babel/polyfill";
import Vue from "vue";
import MyProject from "./MyProject.vue";
import router from "./router";
import store from "./store/index";
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(MyProject),
}).$mount("#app");내 저장소는 작업, 게터, 돌연변이 및 상태에 대한 개별 파일로 나뉩니다.
store/index.js는 다음과 같습니다.
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import state from "./state";
import * as getters from "./getters";
import * as mutations from "./mutations";
import * as actions from "./actions";
export default new Vuex.Store({
state,
getters,
mutations,
actions,
});개발 중에는 프로젝트의 모든 것이 완벽하게 동작하지만, 프로젝트를 빌드하면 vuex가 올바르게 추가되지 않는 것 같습니다.
index.html에 Vue용 CDN(Vue용 CDN 뒤에)을 포함시키면 될 것 같습니다.
이 페이지에 따르면 Vuex - 설치 # 직접 다운로드 / CD
Vue 뒤에 Vuex를 포함하면 자동으로 설치됩니다.
Vue CLI 3 - Build Targets 문서에 따르면 Vue는 외부화되어 있으며 CDN for Vue로 처리되어 있지만 Vue에 접속되어 있는 다른 라이브러리에도 동일하게 적용됩니다.Vue.use()스테이트먼트(예를 들어 컴포넌트가 자경로를 정의하고 있는 경우 Vue Router).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<my-project></my-project>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="my-project.min.js"></script>
</body>
</html>
웹 컴포넌트에 스토어 로드
개발 모드 이후main.jsVue에 스토어를 추가합니다.프로드 모드에서는 웹 컴포넌트 내부에 스토어를 삽입해야 합니다.다음 추가는 당신에게 일을 제공하기에 충분합니다.this.$store속성, 웹 구성 요소에서 작동하지 않는 저장 참조
<template>
...
</template>
<script>
import store from "../store/index";
export default {
props: [...],
store,
...
}
이 대사가 당신을 곤란하게 하는 것 같아요.
import store from "./store/index";
다음과 같이 변경해 보십시오.
import store from "./store";
그index어떤 이유로 CLI가 꺼지는 건 아닌지 궁금하네요.
간단한 해결방법은
Vue.use(Vuex)
안에서.main.js대신store/index.js
답변이 도움이 되었으면 합니다.
언급URL : https://stackoverflow.com/questions/53215559/how-do-i-ensure-the-vuex-store-gets-included-in-my-build
'programing' 카테고리의 다른 글
| PHP는 오류 로그를 어디에 저장합니까? (PHP 5, Apache, Fast CGI 및 cPanel) (0) | 2022.09.15 |
|---|---|
| PHP에서 이중 물음표(?) 연산자는 무엇을 의미합니까? (0) | 2022.09.15 |
| PHP cURL은 단일 요청으로 응답 헤더와 본문을 검색할 수 있습니까? (0) | 2022.09.15 |
| preg_replace를 사용하여 영숫자가 아닌 모든 문자 제거 (0) | 2022.09.15 |
| Android에서 색 정수를 16진수 문자열로 변환하는 방법 (0) | 2022.09.15 |