• 技术文章 >web前端 >uni-app

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

    PHPzPHPz2023-04-20 15:34:35原创51

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

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

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

    1. 安装uni-app插件

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

    使用npm安装:

    npm install -g @vue/cli-plugin-uni

    使用yarn安装:

    yarn global add @vue/cli-plugin-uni
    1. 项目初始化

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

    vue invoke uni

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

    1. 安装依赖

    安装完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
    1. 修改配置

    在项目根目录下,找到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')
          ]
        })
    }
    1. 安装loader

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

    npm install style-resources-loader --save-dev

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

    总结

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

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:
    上一篇:Uni-app为什么能够轻松跨终端 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 深入探讨Uniapp为什么不能使用JavaScript• uniapp可以打几次包• uniapp不支持this.$refs怎么办• uniapp安卓css找不到怎么办• 如何关闭Uniapp默认限制外链浏览器
    1/1

    PHP中文网