vuecli建立uniapp專案報錯怎麼解決

最近在使用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

2. 專案初始化

##建立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

修改配置
4. ##在專案根目錄下，找到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

5. #在專案根目錄下，執行下列指令安裝loader：

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

#此時再次執行npm run dev指令，就可以正常運作uni-app專案了。

總結

透過上述步驟，我們可以快速解決vuecli建立uniapp專案報錯的問題，同時也闡述了解決問題的步驟與原則。希望對大家有幫助。

以上是vuecli建立uniapp專案報錯怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！