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=""></script>
<script src="my-project.min.js"></script>
</body>
</html>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./vue"></script>
<script src="my-project.min.js"></script>
</body>
</html>But I'm getting the following error when opening index.html in my browser:
And it points to this section of my-project.min.js:
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:
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.
Share Improve this question edited Nov 10, 2018 at 1:20 user9161752 asked Nov 8, 2018 at 20:21 KecoeyKecoey 2112 silver badges9 bronze badges 1- Why not build directly with webpack + vue-loader? Out of the box solution. – ege Commented Nov 8, 2018 at 21:35
3 Answers
Reset to default 6It looks like you just need to include a CDN for Vuex (after the CDN for Vue) in your index.html.
According to this page Vuex - Installation# Direct Download / CD
Include Vuex after Vue and it will install itself automatically
The Vue CLI 3 - Build Targets docs say that Vue is externalised, and you have taken care of that with the CDN for Vue, but I'd guess the same applies to any other libraries that are hooked in to Vue with a Vue.use() statement (for example Vue Router, if your ponent defines child routes).
<!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./vue"></script>
<script src="https://unpkg./vuex"></script>
<script src="my-project.min.js"></script>
</body>
</html>
Loading Store in Web Components
Since in dev mode main.js adds your store to Vue, in prod mode store needs to be injected inside the web ponent. The following addition is sufficient to give you a working this.$store property, see Store not working in web ponents
<template>
...
</template>
<script>
import store from "../store/index";
export default {
props: [...],
store,
...
}
I think this line might be giving you trouble
import store from "./store/index";
try changing it to :
import store from "./store";
The index part is implied and I wonder if it is throwing off the CLI for some reason.
Simple solution would be to use
Vue.use(Vuex)
inside main.js instead of store/index.js
I hope the answer is helpful
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745643691a4637842.html
评论列表（0条）