我有一个使用 vue cli 3 的 Vue 应用程序。我遵循指南 here尝试使用 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");我的商店被分成单独的文件，用于操作、 setter/getter 、突变和状态:
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 中包含一个 Vuex 的 CDN(在 Vue 的 CDN 之后)。
根据本页Vuex - Installation# Direct Download / CD
Include Vuex after Vue and it will install itself automatically
Vue CLI 3 - Build Targets文档说 Vue 是外部化的，您已经使用 Vue 的 CDN 处理了这个问题，但我猜这同样适用于使用 Vue.use() 连接到 Vue 的任何其他库。语句(例如 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>
在 Web 组件中加载商店
因为处于开发模式 main.js将您的商店添加到 Vue，在生产模式下，商店需要注入(inject)到 Web 组件中。以下添加足以为您提供工作 this.$store属性(property)，见Store not working in web components
<template>
...
</template>
<script>
import store from "../store/index";
export default {
props: [...],
store,
...
}
关于javascript - 我如何确保 vuex 商店包含在我的构建中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53215559/