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

Question

我有一个使用 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 似乎没有被正确添加。

Answer 1

看起来您只需要在 index.html 中包含 Vuex 的 CDN（在 Vue 的 CDN 之后）。

根据这个页面Vuex - 安装#直接下载/CD

在 Vue 之后包含 Vuex，它会自动安装

Vue CLI 3 - Build Targets文档说 Vue 是外部化的，您已经使用 Vue 的 CDN 处理了这一点，但我猜这同样适用于使用Vue.use()连接到 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 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,
  ...
}

Answer 2

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

import store from "./store/index";

尝试将其更改为：

import store from "./store";

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

Answer 3

简单的解决方案是使用

Vue.use(Vuex)

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

我希望答案有帮助

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

问题描述

3 个解决方案

解决方案1
5 已采纳 2018-11-09 00:23:14

在 Web Components 中加载 Store

解决方案2
0 2018-11-08 21:42:09

解决方案3
0 2020-05-28 07:04:11

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

问题描述

3 个解决方案

解决方案1 5 已采纳 2018-11-09 00:23:14

在 Web Components 中加载 Store

解决方案2 0 2018-11-08 21:42:09

解决方案3 0 2020-05-28 07:04:11

解决方案1
5 已采纳 2018-11-09 00:23:14

解决方案2
0 2018-11-08 21:42:09

解决方案3
0 2020-05-28 07:04:11