How to solve the error when creating uniapp project in vuecli

Recently, when using vuecli to create the uniapp project, I encountered an error problem, namely:

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

After some investigation, I finally found a solution, and now I share it with you.

1. Install the uni-app plug-in

Creating the uni-app project in vuecli requires the uni-app plug-in, so it needs to be installed first.

Install using npm:

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

Install using yarn:

yarn global add @vue/cli-plugin-uni

2. Project initialization

After creating the vuecli project, you need to Use the following command in the root directory to initialize:

vue invoke uni

During the installation process, you need to select uni-app.

3. Installing dependencies

After installing the uni-app plug-in, you need to install other dependencies, including @vue/cli-plugin-uni and webpack-cli.

Install using npm:

npm install @vue/cli-plugin-uni webpack-cli --save

Install using yarn:

yarn add @vue/cli-plugin-uni webpack-cli

4. Modify configuration

In the project root directory, find vue .config.js file, add the following code:

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. Install loader

In the project root directory, execute the following command to install the loader:

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

At this time, run the npm run dev command again and you can run the uni-app project normally.

Summary

Through the above steps, we can quickly solve the problem of error reporting when creating uniapp project in vuecli, and also explain the steps and principles of solving the problem. I hope to be helpful.

The above is the detailed content of How to solve the error when creating uniapp project in vuecli. For more information, please follow other related articles on the PHP Chinese website!