vue-cli按需引⼊antd样式⽂件报错问题这个问题根据vue-cli版本和less版本不同，解决⽅法也不⼀样,⼀定要先看看你⾃⼰package.josn⽂件⾥的安装包版本我的版本
"dependencies": {
"core-js": "^3.6.5",
"echarts": "^5.0.1",
"vue": "^2.6.11",
"vue-router": "^3.4.9"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"ant-design-vue": "^1.7.2",
"babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.13.3",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"less": "^4.1.0",
"less-loader": "^7.2.1",
"vue-template-compiler": "^2.6.11"
},
我的版本vue-cli是4.x版本  less也是4.x版本
使⽤vue-cli新建项⽬后，安装ant-design-vue，启动项⽬就报错了
Cannot find module 'less'
⼤概就是没有到对应的babel
安装上less和less-loader
重新启动，还是报错
Syntax Error:
// github/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
其实这⾥有个提⽰，让你去githup去查看，不过当时没看这个,⼜在⽹上搜索了⼀通，安装了⼏个插件，但是都不⾏,
然后去githup上搜索了⼀下错误，还真有这个问题,
根据⾥⾯的回答配置了fig.js⽂件，主要是配置红⾊代码部分
devServer: {
port: 8090,
open: true
},
configureWebpack: {
resolve: {
alias: {
"@": solve(__dirname, './src')
}
}
},
css:{
requireModuleExtension: true,
loaderOptions:{
less:{
javascriptEnabled: true
}
}
}
}
启动之后,⼜...⼜报错了
ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema. -options has an unknown property 'javascriptEnabled'. These properties are valid: object { lessOptions?, additionalData?, sourceMap?, webpackImporter? }
这⾥就是版本不同写法不同了，这个解决⽅案是3.x版本的, 4.x版本需要再加⼀层lessoption，这个报错⾥⾯也有说到
正确写法
devServer: {
port: 8090,
open: true
},
configureWebpack: {
resolve: {
alias: {
"@": solve(__dirname, './src')
}
}
},
ant安装包css:{
requireModuleExtension: true,
loaderOptions:{
less:{
lessOptions:{
javascriptEnabled: true
}
}
}
}
}
再次启动，没有报错了，但是打开的页⾯是这样的
什么样式的都没有了......
⼜查了半天，也没到解决⽅法
最后，把node-modules这个包整个删掉，再删掉package.json⽂件中⼀些没⽤的版本记录，重新下载包，再次重启,OK，页⾯终于正常了
所以说，如果有时候你的配置什么都没问题，但是就是没效果，可能是安装包的问题，删包重装也不失为⼀个好⽅法O(∩_∩)O哈哈~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。