如何确保 vuex 商店包含在我的构建中？
Kec*_*oey 5 javascript web-component vue.js vuex vue-cli-3
我有一个使用 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");我的商店分为单独的文件，用于操作、getter、mutation 和 state：
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 - 安装#直接下载/CD
在 Vue 之后包含 Vuex，它会自动安装
在Vue公司CLI 3 -构建目标文档说Vue公司是外在的，你有照顾的，随着CDN的Vue公司，但我猜这同样适用于被钩到Vue公司与任何其他库Vue.use()语句（例如 Vue 路由器，如果您的组件定义了子路由）。
<!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 Components 中加载 Store
由于在开发模式下main.js将您的商店添加到 Vue，因此在生产模式下需要将商店注入到 Web 组件中。以下添加足以为您提供工作this.$store属性，请参阅Store not working in web components
<template>
...
</template>
<script>
import store from "../store/index";
export default {
props: [...],
store,
...
}
| 归档时间： |
|
| 查看次数： |
1297 次 |
| 最近记录： |