我如何确保 vuex 商店包含在我的构建中？

Question

我有一个使用 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 时出现以下错误：

它指向我的这一部分-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 似乎没有被正确添加。

Answer 1

我觉得这条线可能会给你带来麻烦

import store from "./store/index";

尝试将其更改为：

import store from "./store";

index 部分是隐含的，我想知道它是否出于某种原因放弃了 CLI。

Answer 2

看起来您只需要在 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 挂钩的任何其他库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>

正在加载 Web 组件中的商店

由于在开发模式下 main.js 将您的商店添加到 Vue，在生产模式下商店需要注入到 Web 组件中。下面的添加足以让你工作 this.$store 属性，见 Store not working in web components

<template>
 ...
</template>

<script>
import store from "../store/index";

export default {
  props: [...],
  store,
  ...
}

Answer 3

简单的解决方案是使用

Vue.use(Vuex)

在 main.js 而不是 store/index.js

希望回答对你有帮助

我如何确保 vuex 商店包含在我的构建中？

How do I ensure the vuex store gets included in my build?

javascript

web-component

vue.js

vuex

vue-cli-3

正在加载 Web 组件中的商店