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을 선택해야 합니다.

3. 종속성 설치

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')
      ]
    })
}

5. 로더 설치

프로젝트 루트 디렉터리에서 다음 명령어를 실행하여 로더를 설치합니다.

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

이때 다시 npm run dev 명령어를 실행하면 uni-app 프로젝트를 정상적으로 실행할 수 있습니다.

요약

위 단계를 통해 vuecli에서 uniapp 프로젝트 생성 시 오류 보고 문제를 빠르게 해결할 수 있고, 문제 해결 단계와 원리도 설명할 수 있습니다. 도움이 되기를 바랍니다.

위 내용은 vuecli에서 uniapp 프로젝트 생성시 오류 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!