Question

我有一个使用vue cli 3的Vue应用程序。我正在按照指南here尝试使用for listitem, wanted in slist.items(): value = item[listitem] * wanted total += value构建我的应用程序

要测试输出，我有一个index.html文件：

vue-cli-service build --target wc --name my-element [entry]

但是在浏览器中打开index.html时出现以下错误：

它指向my-project.min.js的这一部分：

我的main.js：

<!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>

我的商店分为用于操作，获取，突变和状态的单个文件：

store / index.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");

项目中的所有内容在开发过程中都能正常运行，但是当我构建项目时，似乎并没有正确添加vuex。

Answer 1

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

根据此页面Vuex - Installation# Direct Download / CD

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

Vue CLI 3 - Build Targets文档说Vue已被外部化，您已经使用CDN for Vue来解决了这一问题，但是我想这也适用于使用{ {1}}语句（例如，Vue Router，如果您的组件定义了子路由）。

Vue.use()

在Web组件中加载商店

由于在开发模式下<!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>将您的商店添加到Vue，因此在生产模式下，需要将商店注入Web组件内。以下添加内容足以为您提供有效的main.js属性，请参见Store not working in web components

this.$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 个答案:

在Web组件中加载商店