Как сделать так, чтобы магазин vuex был включен в мою сборку? - PullRequest
Новая
       22

Как сделать так, чтобы магазин vuex был включен в мою сборку?

0 голосов
/ 08 ноября 2018

У меня есть приложение Vue, которое использует vue cli 3. Я следую инструкциям здесь , чтобы попытаться собрать мое приложение с помощью 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 в моем браузере: enter image description here

И это указываетв этот раздел my-project.min.js:

enter image description here

Мой 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");

Мой магазин разделен на отдельные файлы для действий, получателей, мутаций и состояния:

enter image description here

И 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, кажется, не добавляется правильно.

Ответы [ 2 ]

0 голосов
/ 09 ноября 2018

Похоже, вам просто нужно включить CDN для Vuex (после CDN для Vue) в ваш index.html.

Согласно этой странице Vuex - Установка # Прямая загрузка / CD

Включите Vuex после Vue, и он автоматически установится

Документация CLI 3 Vue - цели построения документы говорят, что Vue является внешним,и вы позаботились об этом с CDN для Vue, но я предполагаю, что то же самое относится и к любым другим библиотекам, которые подключены к 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>

Загрузка хранилища в веб-компонентах

Поскольку в режиме разработки main.js добавляет хранилище в Vue, в режиме prod хранилище необходимо вводить внутри веб-компонента.Следующего добавления достаточно, чтобы предоставить вам работающее свойство this.$store, см. Магазин не работает в веб-компонентах 

<template>
 ...
</template>

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

export default {
  props: [...],
  store,
  ...
}
0 голосов
/ 09 ноября 2018

Я думаю, что эта линия может доставить вам неприятности

import store from "./store/index";

попробуйте изменить его на:

import store from "./store";

Подразумевается часть index, и мне интересно, если она по какой-то причине отбрасывает CLI.

...