title: How do I ensure the vuex store gets included in my build?
body: <p>I have a Vue application that is using vue cli 3. I'm following the guide <a href="https://cli.vuejs.org/guide/build-targets.html#web-component" rel="nofollow noreferrer">here</a> to try building my app with <code>vue-cli-service build --target wc --name my-element [entry]</code></p>
  
  <p>To test the output, I have an index.html file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
      &lt;title&gt;Document&lt;/title&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;my-project&gt;&lt;/my-project&gt;
      &lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
      &lt;script src="my-project.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I'm getting the following error when opening index.html in my browser:
  <a href="https://i.stack.imgur.com/JK3pv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JK3pv.png" alt="enter image description here"></a></p>
  
  <p>And it points to this section of my-project.min.js:</p>
  
  <p><a href="https://i.stack.imgur.com/5uPTP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5uPTP.png" alt="enter image description here"></a></p>
  
  <p>My main.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 =&gt; h(MyProject),
  }).$mount("#app");</code></pre>
  </div>
  </div>
  </p>
  
  <p>My store is divided into individual files for actions, getters, mutations, and the state:</p>
  
  <p><a href="https://i.stack.imgur.com/jAF3R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jAF3R.png" alt="enter image description here"></a></p>
  
  <p>And store/index.js looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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,
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Everything in the project works perfectly fine during development, but when I build the project, vuex doesn't seem to be getting added correctly.</p>