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

百变鹏仔 2个月前 (11-20) #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项目报错怎么解决

详解uni-app（vue）基于InnerAudioContext封装一个基本的音频组件

什么是uni-app

uni-app之小程序包大小优化

uni-app在不同平台下拨打电话的示例

uni-app适配到微信小程序注意事项