I am currently working on a Vue application using vue cli 3. I found a guide here that explains how to build the app with
vue-cli-service build --target wc --name my-element [entry]In order to test the output, I have created 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="my-project.min.js"></script>
</body>
</html>However, when I open index.html in my browser, I encounter the following error: https://i.sstatic.net/JK3pv.png
The error seems to be pointing to a specific section of my-project.min.js:
https://i.sstatic.net/5uPTP.png
This is snippet from 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 structure includes individual files for actions, getters, mutations, and the state:
https://i.sstatic.net/jAF3R.png
The store/index.js file is organized like so:
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,
});While everything works perfectly during development, vuex does not seem to be correctly added after building the project.