Vue 开发实战实战篇 # 28：如何自定义Webpack和Babel配置

Posted 2022-09-23 凯小默

说明

【Vue 开发实战】学习笔记。

解决 less 配置问题

main.js 文件添加配置

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import Antd from "ant-design-vue";
// 需要自定义样式主题，这里使用less
import "ant-design-vue/dist/antd.less";

Vue.config.productionTip = false;

Vue.use(Antd);

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

https://github.com/ant-design/ant-motion/issues/44

这个问题有下面两种方式：第一种是降低less版本，另一个是配置css的 less-loader，我们使用第二种

查看 vuecli 的 官网配置https://cli.vuejs.org/zh/config/#css-loaderoptions

我们新建 vue.config.js 文件，添加下面的配置

module.exports = 
    css: 
        loaderOptions: 
            less: 
                javascriptEnabled: true
            ,
        
    

然后重新启动一下，发现就没有报错了。

我们在 App.vue 组件里添加下面代码

<template>
  <div id="app">
    <a-button>按钮</a-button>
  </div>
</template>

<style lang="less"></style>

按需引入 ant-design-vue 组件

我们可以看到全局注册所有组件会很大

我们可以使用到的时候在引入

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// import Antd from "ant-design-vue";
// // 需要自定义样式主题，这里使用less
// import "ant-design-vue/dist/antd.less";

import Button from "ant-design-vue/lib/button";
import 'ant-design-vue/lib/button/style';

Vue.config.productionTip = false;

// Vue.use(Antd);
Vue.use(Button);

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

我们可以看到小了很多，但是这样还是很不方便，需要每个都这样去引入单个组件的东西

如果你使用了 babel，那么可以使用 babel-plugin-import 来进行按需加载。

具体可以参考https://1x.antdv.com/docs/vue/introduce-cn/

我们按照文档上的添加babel配置，修改 babel.config.js 配置

module.exports = 
	presets: ["@vue/cli-plugin-babel/preset"],
	"plugins": [
		["import",  
			"libraryName": "ant-design-vue",
			"libraryDirectory": "es",
			"style": true // 会加载 less 文件
		]
	]
;

安装依赖

npm i babel-plugin-import -D

修改 main.js 文件里的引入组件方式

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

// import Antd from "ant-design-vue";
// // 需要自定义样式主题，这里使用less
// import "ant-design-vue/dist/antd.less";

// import Button from "ant-design-vue/lib/button";
// import 'ant-design-vue/lib/button/style';

import  Button  from "ant-design-vue";

Vue.config.productionTip = false;

// Vue.use(Antd);
Vue.use(Button);

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

重启下服务，我们可以看到效果是一样的。