vuecli创建uniapp项目报错怎么解决

广告:宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

vuecli创建uniapp项目报错怎么解决

最近在使用vuecli创建uniapp项目时,遇到了一个报错的问题,即:

"Cannot find module "@dcloudio/webpack-uni-mp-loader""

经过一番排查,终于找到了解决办法,现在分享给大家。

安装uni-app插件

在vuecli中创建uni-app项目需要用到uni-app插件,因此需要先安装。

使用npm安装:

npm install -g @vue/cli-plugin-uni
登录后复制

使用yarn安装:

yarn global add @vue/cli-plugin-uni
登录后复制项目初始化

创建vuecli项目后,需要在项目根目录下使用以下命令进行初始化:

vue invoke uni
登录后复制

安装过程中,需要选择uni-app。

安装依赖

安装完uni-app插件后,还需要安装其他依赖,包括@vue/cli-plugin-uni和webpack-cli等。

使用npm安装:

npm install @vue/cli-plugin-uni webpack-cli --save
登录后复制

使用yarn安装:

yarn add @vue/cli-plugin-uni webpack-cli
登录后复制修改配置

在项目根目录下,找到vue.config.js文件,添加以下代码:

chainWebpack: config => {  const types = ['vue-modules', 'vue', 'normal-modules', 'normal']  types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))},function addStyleResource (rule) {  rule.use('style-resource')    .loader('style-resources-loader')    .options({      patterns: [        path.resolve(__dirname, './src/assets/styles/vars.styl'),        path.resolve(__dirname, './src/assets/styles/mixins.styl')      ]    })}
登录后复制安装loader

在项目根目录下,执行以下命令安装loader:

npm install style-resources-loader --save-dev
登录后复制

此时再次运行npm run dev命令,就可以正常运行uni-app项目了。

总结

通过以上步骤,我们可以快速解决vuecli创建uniapp项目报错的问题,同时也阐述了解决问题的步骤和原理。希望对大家有所帮助。

以上就是vuecli创建uniapp项目报错怎么解决的详细内容,更多请关注9543建站博客其它相关文章!

广告:SSL证书一年128.66元起,点击购买~~~

9543建站博客
一个专注于网站开发、微信开发的技术类纯净博客。
作者头像
admin创始人

肥猫,知名SEO博客站长,14年SEO经验。

上一篇:HTML5幻灯片系统:H5Slides
下一篇:css3设置帧

发表评论

关闭广告
关闭广告