vuecli3.0 引入vant报错Cannot find module 'babel-plugin-import' from ' '解决方法

本文详细描述了一次在Vue项目中遇到的babel-plugin-import模块缺失错误,介绍了如何通过修改package.json文件并使用vue ui命令安装依赖来解决此问题,确保项目能够正常运行。

 

 

error in ./src/main.js

 

Module build failed (from ./node_modules/babel-loader/lib/index.js):

Error: Cannot find module 'babel-plugin-import' from 'd:\code\vue-test-0731'

at Function.module.exports [as sync] (d:\code\vue-test-0731\node_modules\resolve\lib\sync.js:71:15)

at resolveStandardizedName (d:\code\vue-test-0731\node_modules\@babel\core\lib\config\files\plugins.js:101:31)

at resolvePlugin (d:\code\vue-test-0731\node_modules\@babel\core\lib\config\files\plugins.js:54:10) at loadPlugin (d:\code\vue-test-0731\node_modules\@babel\core\lib\config\files\plugins.js:62:20) at createDescriptor (d:\code\vue-test-0731\node_modules\@babel\core\lib\config\config-descriptors.js:154:9) at items.map (d:\code\vue-test-0731\node_modules\@babel\core\lib\config\config-descriptors.js:109:50) at Array.map (<anonymous>)

at createDescriptors (d:\code\vue-test-0731\node_modules\@babel\core\lib\config\config-descriptors.js:109:29) at createPluginDescriptors (d:\code\vue-test-0731\node_modules\@babel\core\lib\config\config-descriptors.js:105:10)

at plugins (d:\code\vue-test-0731\node_modules\@babel\core\lib\config\config-descriptors.js:40:19) at mergeChainOpts (d:\code\vue-test-0731\node_modules\@babel\core\lib\config\config-chain.js:319:26) at d:\code\vue-test-0731\node_modules\@babel\core\lib\config\config-chain.js:283:7 at buildRootChain (d:\code\vue-test-0731\node_modules\@babel\core\lib\config\config-chain.js:90:20) at loadPrivatePartialConfig (d:\code\vue-test-0731\node_modules\@babel\core\lib\config\partial.js:85:55) at Object.loadPartialConfig (d:\code\vue-test-0731\node_modules\@babel\core\lib\config\partial.js:110:18) at Object.<anonymous> (d:\code\vue-test-0731\node_modules\babel-loader\lib\index.js:144:26)

@ multi (webpack)-dev-server/client?http://192.168.0.185:8083/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

package.json 里缺少babel-plugin-import运行依赖

 

cmd终端上 输入vue ui 安装"babel-plugin-import": "^1.12.0", 依赖

 

然后重新运行 npm run serve  就成功运行了

 

当使用 Vue 和 `babel-plugin-import` 插件自动引入 Vant 组件样式时,出现本地正常但线上不正常的情况,可从以下几个方面排查和解决: ### 1. 检查依赖安装 确保线上环境的依赖安装完整且版本与本地一致。可以尝试删除线上环境的 `node_modules` 目录,然后重新安装依赖: ```bash rm -rf node_modules npm install ``` ### 2. 配置文件检查 - **babel.config.js**:确保 `babel.config.js` 文件配置正确。示例配置如下: ```javascript module.exports = { presets: [ &#39;@vue/cli-plugin-babel/preset&#39; ], plugins: [ [&#39;import&#39;, { libraryName: &#39;vant&#39;, libraryDirectory: &#39;es&#39;, style: true }, &#39;vant&#39;] ] }; ``` - **webpack 配置**:检查线上环境的 webpack 配置是否对样式文件处理有特殊配置,可能会影响 Vant 组件样式的引入。确保 `css-loader`、`style-loader` 等配置正确。 ### 3. 构建命令检查 确保线上构建命令与本地一致。例如,本地使用 `npm run build` 构建,线上也应使用相同命令。 ### 4. 缓存问题 清除线上环境的缓存,包括浏览器缓存和构建工具的缓存。可以尝试在构建前清除缓存: ```bash npm cache clean --force ``` ### 5. 版本兼容性 检查 `vant`、`babel-plugin-import` 和 `vue` 的版本是否兼容。可以参考官方文档或社区论坛,确保使用的版本相互兼容。 ### 6. 静态资源路径问题 检查线上环境的静态资源路径配置是否正确。如果路径配置错误,可能会导致样式文件无法正确加载。 ### 7. 代码分割和懒加载 如果项目中使用了代码分割和懒加载,可能会影响样式的引入。确保在代码分割和懒加载的配置中正确处理样式文件。 ### 8. 日志和调试 查看线上环境的构建日志和浏览器控制台日志,查找是否有报错信息。根据报错信息进行针对性的排查和解决
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值