最近在使用vuecli创建uniapp项目时,遇到了一个报错的问题,即:
"Cannot find module "@dcloudio/webpack-uni-mp-loader""
经过一番排查,终于找到了解决办法,现在分享给大家。
在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:
npm install style-resources-loader --save-dev
此时再次运行npm run dev命令,就可以正常运行uni-app项目了。
总结
通过以上步骤,我们可以快速解决vuecli创建uniapp项目报错的问题,同时也阐述了解决问题的步骤和原理。希望对大家有所帮助。
以上是vuecli创建uniapp项目报错怎么解决的详细内容。更多信息请关注PHP中文网其他相关文章!