javascript - Error when building and launching vue project - Stack Overflow

admin管理员组

文章数量:1391975

My vue js project at server startup should be built with webpack and then run with exspress js, but I get the following error

ERROR Error: Build failed with errors. Error: Build failed with errors. at C:\Users\Admin\Marketplays\node_modules@vue\cli-service\lib\commands\build\index.js:207:23 at C:\Users\Admin\Marketplays\node_modules\webpack\lib\webpack.js:168:8 at C:\Users\Admin\Marketplays\node_modules\webpack\lib\HookWebpackError.js:67:2 at Hook.eval [as callAsync] (eval at create (C:\Users\Admin\Marketplays\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Admin\Marketplays\node_modules\tapable\lib\Hook.js:18:14) at Cache.shutdown (C:\Users\Admin\Marketplays\node_modules\webpack\lib\Cache.js:154:23) at C:\Users\Admin\Marketplays\node_modules\webpack\lib\Compiler.js:1379:15 at Hook.eval [as callAsync] (eval at create (C:\Users\Admin\Marketplays\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1) at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Admin\Marketplays\node_modules\tapable\lib\Hook.js:18:14) at Compiler.close (C:\Users\Admin\Marketplays\node_modules\webpack\lib\Compiler.js:1372:23)

In webpack and vue configurations I wrote seemingly everything I needed, but still didn't work. Before this asked for libraries to support css, they are installed, now it's not clear what is being asked for

vue configurations:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css',
      }),
    ],
  },
  chainWebpack: config => {
    config.module
      .rule('css')
      .uses.clear(); 

    config.module
      .rule('css')
      .test(/\.css$/)
      .use('style-loader')
      .loader('style-loader');

    config.module
      .rule('css')
      .use('css-loader')
      .loader('css-loader')
      .options({
        modules: true,
        sourceMap: true,
      });

    config.plugins.delete('extract-css'); 
  },
};

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },
  },
};

webpack configuration:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js', 
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html' 
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};


     const MiniCssExtractPlugin = require('mini-css-extract-plugin');
     
     module.exports = {
       plugins: [
         new MiniCssExtractPlugin({
           filename: '[name].css',
           chunkFilename: '[id].css'
         })
       ],
       module: {
         rules: [
           {
             test: /\.css$/,
             use: [
               MiniCssExtractPlugin.loader,
               'css-loader'
             ]
           }
         ]
       }
     };
     

I have installed all the necessary css libraries, installed vue-cli, re-configured the dependencies, cleared the cache, but when I run the project it gives the above error.

本文标签： javascriptError when building and launching vue projectStack Overflow