在vue-cli 4.x中使用vant出现的问题,在这里记录一下一. 如果使用按需加载,需要下载babel-plugin-import转换一下,下载 babel-plugin-import
cnpm install babel-plugin-import -D
cnpm install babel-plugin-import -D**二. 在根目录中找到 babel.config.js 文件 , 添加字段 **
"plugins": [

["import",{

"libraryName":"vant",

"style":true

}

]
]
最终我的配置是这样的
module.exports = {
presets: [

'@vue/cli-plugin-babel/preset',
],
"plugins": [

["import",{

"libraryName":"vant",

"style":true

}

]
]
}
"plugins": [

["import",{

"libraryName":"vant",

"style":true

}

]
]
最终我的配置是这样的
module.exports = {
presets: [

'@vue/cli-plugin-babel/preset',
],
"plugins": [

["import",{

"libraryName":"vant",

"style":true

}

]
]
}接下来重启项目一下。补充知识：vue cli 3 升级到 vue cli 4 方法步骤及升级点总结补充知识：补充知识：vue cli 3 升级到 vue cli 4 方法步骤及升级点总结官方升级英文文档，中文文档相对滞后。英文文档中文文档简介：vue cli 4 官方已经更新有一段时间了，现在是4.0.5 版本，看了官方文档大概有二十几点的更新，还是干货满满呀，值得升级一下，下面是升级步骤。一.首先，在全局安装最新的 Vue CLI：一.首先，在全局安装最新的 Vue CLI：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli检查安装的版本检查安装的版本vue -V # 输出:@vue/cli 4.x.x 说明@vue/cli 4安装成功( vue cli 3的版本会输出 3.x.x )踩坑记录踩坑记录npm install -g @vue/cli 执行成功，但是执行 vue -V 输出的还是3.5.6(我以前安装的版本)，于是又重新执行 npm install -g @vue/cli，显示成功，执行 vue -V 输出的还是3.5.6，一脸懵逼 ，然后重启电脑，再执行vue -V 输出 @vue/cli 4.0.5，解决 。二.在项目根目录下执行二.在项目根目录下执行
vue upgrade
vue upgrade然后出现提示 继续升级这些插件吗？ 输入 Y 即可.三.等步骤二 执行完会发现主要有 2 个文件被修改三.等步骤二 执行完会发现主要有 2 个文件被修改1.文件 babel.config.js主要是 babel 的预设由@vue/app 改成了@vue/cli-plugin-babel/preset原来的
module.exports = {
presets: [

'@vue/app', // 这行

[

'@babel/preset-env',

{

useBuiltIns: 'entry'

}

]
]
}
module.exports = {
presets: [

'@vue/app', // 这行

[

'@babel/preset-env',

{

useBuiltIns: 'entry'

}

]
]
}升级后的
module.exports = {
presets: [

'@vue/cli-plugin-babel/preset', // 这行

[

'@babel/preset-env',

{

useBuiltIns: 'entry'

}

]
]
}
module.exports = {
presets: [

'@vue/cli-plugin-babel/preset', // 这行

[

'@babel/preset-env',

{

useBuiltIns: 'entry'

}

]
]
}2.文件 package.json （package-lock.json 也会更改）主要是依赖升级原来的
{
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-service": "^3.11.0"
}
{
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-service": "^3.11.0"
}升级后的
{
"@vue/cli-plugin-babel": "^4.0.5",
"@vue/cli-plugin-eslint": "^4.0.5",
"@vue/cli-service": "^4.0.5"
}
{
"@vue/cli-plugin-babel": "^4.0.5",
"@vue/cli-plugin-eslint": "^4.0.5",
"@vue/cli-service": "^4.0.5"
}四.然后启动项目四.然后启动项目
npm run serve
npm run serve然后报下面的错1.第一个错（警告）
WARN A new version of sass-loader is available. Please upgrade for best experience.
WARN A new version of sass-loader is available. Please upgrade for best experience.这行是 vue cli 4 升级了自己的依赖 sass-loader 导致的它把 sass-loader由 ^7.x.x 的版本升级到了 ^8.0.0,而我项目中使用的是^7.1.0所以升级一下自己项目的 sass-loader 就好了执行下面命令即可
npm i sass-loader@8.0.0 -D
npm i sass-loader@8.0.0 -D2.然后第二个错说没有安装core-jsvue cli 4把 core-js由 ^2.x.x 的版本升级到了 ^3.x.x于是安装一下
npm i core-js
npm i core-js然后重启项目还是不行，看了下官方文档和 babel 有关main.js 代码中
import '@babel/polyfill'
import '@babel/polyfill'隐藏这个代码重启好了然后把 @babel/polyfill 换成 babel-polyfill 即可
npm i babel-polyfill
npm i babel-polyfillmain.js 代码中 改为
import 'babel-polyfill'
import 'babel-polyfill'五.vue cli 4 主要升级点总结五.vue cli 4 主要升级点总结1."@vue/cli-plugin-babel", "@vue/cli-plugin-eslint", "@vue/cli-service"由 v3 的版本升级到了 v42.sass-loader由 v7 的版本升级到了 v83.core-js由 v2 的版本升级到了 v34.webpack-chain由 v4 的版本升级到了 v65.css-loader由 v1 的版本升级到了 v36.url-loader由 v1 的版本升级到了 v27.file-loader由 v3 的版本升级到了 v48.copy-webpack-plugin由 v4 的版本升级到了 v59.terser-webpack-plugin由 v1 的版本升级到了 v210.@vue/cli-plugin-pwa由 v3 的版本升级到了 v411.新增插件 vue add vuex vue add router12.pug-plain已重命名为pug-plain-loader13.默认目录结构已更改
src/store.js 改为 src/store/index.js
src/router.js 改为 src/router/index.js
src/store.js 改为 src/store/index.jssrc/router.js 改为 src/router/index.js14.由于兼容性原因，仍支持 router＆routerHistoryMode 选项 preset.json但是现在建议使用它来 plugins: { '@vue/cli-plugin-router': { historyMode: true } }获得更好的一致性15.api.hasPlugin('vue-router')不再受支持，现在 api.hasPlugin('router')16.lintOnSave 选项的默认值（未指定时）从 true 更改为 default17.废弃vue-cli-service test:e2e18.@vue/cli-plugin-e2e-nightwatch Nightwatch.js已从0.9升级到1.x19.@vue/cli-plugin-unit-mocha 升级到Mocha 620.@vue/cli-plugin-unit-jest jest由 v23 升级到v2421.@vue/cli-plugin-typescript 更好的ts(x)支持 ，胜过js(x)参考链接参考链接vue cli 4 官方英文升级文档vue cli 4 官方英文升级文档以上这篇Vant 在vue-cli 4.x中按需加载操作就是小编分享给大家的全部内容了，希望能给大家一个参考。