通过vue-cli
创建的应用,安装了ant-design-vue
,并通过babel-plugin-import
进行按需引入。
错误如下:
yarn serve
yarn run v1.22.10
$ vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
ERROR Failed to compile with 1 error 下午10:48:31
error in ./node_modules/ant-design-vue/es/button/style/index.less
Syntax Error:
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
Error in /Users/tony/study/antd-demo/node_modules/ant-design-vue/es/style/color/bezierEasing.less (line 110, column 0)
@ ./node_modules/ant-design-vue/es/button/style/index.less 4:14-207 15:3-20:5 16:22-215
@ ./node_modules/ant-design-vue/es/button/style/index.js
@ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js&
@ ./src/App.vue?vue&type=script&lang=js&
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://192.168.3.24:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
安装完成后在vue页面中应用Button
组件,启动项目报错如下:
运行yarn add less less-loader -D
安装依赖后运行yarn serve
报错如下,是由于less-loader
版本过高导致的问题。
对less-loader
进行降级处理:
在vue.config.js
中进行如下配置:
module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
javascriptEnabled: true
}
}
}
}
};
完美解决: