Vue项目中的问题积累

Vue-cli 4+配置Sass出现的问题

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "./src/assets/styles/base.scss";`,
      },
    },
  },
};

1. sass-loader 的版本问题
   • v8- : 选项的名字是 data
   • v8 : 选项名字是 prependData
   • v10+ : 选项的名字是 additionalData

Vue-cli4+ 配置 Element-UI 按需加载

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ],
};

Vue项目中使用Unity3D

使用第三方vue-unity-webgl,可以方便调用方法

<unity src="https://github.com/votetake/vue-unity-webgl/raw/master/static/Build/game.json" width="1000" height="600" unityLoader="static/Build/UnityLoader.js"></unity>  

import Unity from 'vue-unity-webgl'

new Vue({
	components: { Unity }
})

Vue项目路由重复跳转相同的路由报错

通过call方法，来重新对Push方法进行改写，对错误进行拦截

// 点击路由，重复跳转会报错
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function (location) {
  return VueRouterPush.call(this, location).catch(err => err)
}