最近在使用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中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
427
