vue/cli3 中配置路由和 vuex , 解决 core-js 报错问题

用vue/cli4多了, cli4 会让你选择需要使用到的东西 router  vuex

但是在cli3 中, 是没有这些配置的 , 我们在项目中需要自己配制

router 配置如下

import Vue from "vue";
import Router from "vue-router";

import Login from "../components/login";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      redirect: "/login",
    },
    {
      path: "/login",
      component: Login,
    },
  ],
});

在main入口文件中

// 导入路由
import router from "./router/router";

new Vue({
  render: (h) => h(App),
  router,
  store,
}).$mount("#app");

 

使用vuex

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 199,
    msg: 'hello world'
  },
  mutations: {},
});

export default store;

在main入口文件中

// 导入路由
import router from "./router/router";

new Vue({
  render: (h) => h(App),
  router,
  store,
}).$mount("#app");

如果在组件中使用了展开运算符 , 并且报错了

<script>
// import { mapState } from "vuex";
import { mapState } from "vuex";

export default {
  data: function () {
    return {};
  },
  methods: {},

  computed: {
    ...mapState(["msg"]),
  },
};
</script>

或者提示  安装 core-js@2 的时候 , 不要直接去安装 core-js@2 , 依旧会报错

推荐

npm install core-js --save

也就是忽略它推荐的版本号 , 不然 bug 似乎并不能 完美解决