为何vuex未被打包进Vue.js的输出文件?

Question

为何vuex未被打包进Vue.js的输出文件?

发布于
2023-12-18 浙江

新手上路，请多包涵

dependencies没有把vuex打包进入

  "dependencies": {
    "@tinymce/tinymce-vue": "^3.0.1",
    "axios": "^1.4.0",
    "clipboard": "^2.0.11",
    "dayjs": "^1.11.9",
    "element-ui": "^2.15.13",
    "fingerprintjs2": "^2.1.4",
    "ipify": "^6.0.0",
    "live-server": "^1.2.2",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.43",
    "postcss": "^8.4.27",
    "qs": "^6.11.2",
    "tinymce": "^5.1.0",
    "uuid": "^9.0.0",
    "vue": "^2.5.2",
    "vue-axios": "^3.5.2",
    "vue-puzzle-vcode": "^1.1.10",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.1",
    "vuex": "^3.6.2"
  },

但是我在本机是可以允许,这代表我引入的imp vuex是可以的,但是打包之后就没有
index.js

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);

main.js

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import router from './router'
import store from './store'

Vue.use(ElementUI);

Vue.config.productionTip = false


/* eslint-disable no-new */
new Vue({
  // el: '#app',
    // components: { App },
  // template: '<App/>'
  router,
  store,
  render: h => h(App)
}).$mount('#app')

vue.js vuex 打包

阅读 708

AI BotBETA

首先，要明确一点，当你使用诸如 Webpack 这样的模块打包器时，它只会包含你在代码中实际使用到的依赖项。在你的例子中，你已经在你的项目中安装了 vuex，但是在你的代码中并没有任何地方实际使用了 vuex，所以 Webpack 没有把它包含进最终的打包文件中。

为了解决这个问题，你需要在你的代码中实际使用 vuex。这通常是通过在你的组件中调用 this.$store 来完成的。例如，如果你有一个名为 MyComponent 的组件，并且你想从 vuex 中获取一些状态，你可以这样做：

export default {
  computed: {
    myState() {
      return this.$store.state.myState;
    }
  }
}

这样，当你在模板中使用 myState 时，Webpack 就会知道它需要包含 vuex。

另外，你需要在你的 store.js 文件中设置你的状态和 mutations。例如：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    myState: 'initial state'
  },
  mutations: {
    setMyState(state, newState) {
      state.myState = newState;
    }
  }
});

然后你就可以在你的组件中通过 this.$store.state.myState 或 this.$store.commit('setMyState', newState) 来访问或修改这个状态了。

1 个回答

得票最新

linong

29.2k1163127

发布于
2023-12-19 北京

打包没有是什么意思？和 dependencies 没关系。

想要产物中没有 vuex 需要修改 externals。

撰写回答