Categories
javascript vue-cli-3 vue.js vuex web-component

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

I have a Vue application that is using vue cli 3. I’m following the guide here to try building my app with vue-cli-service build --target wc --name my-element [entry]

To test the output, I have an index.html file:

<!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://www.faqcode4u.com/faq/519118/my-project.min.js"></script>
</body>
</html>

But I’m getting the following error when opening index.html in my browser:
enter image description here

And it points to this section of my-project.min.js:

enter image description here

My 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");

My store is divided into individual files for actions, getters, mutations, and the state:

enter image description here

And store/index.js looks like this:

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,
});

Everything in the project works perfectly fine during development, but when I build the project, vuex doesn’t seem to be getting added correctly.