Vue.config.js не удалось распознать require(«веб-пакет»)

#vue.js #webpack #vuejs3

Вопрос:

Я создаю проект vue3.0 ts с помощью CLI, когда я добавляю vue.config.js , в нем всегда есть ошибка require

 const webpack = require('webpack'); const path = require('path');  

Ошибки заключаются в

 module "d:/learning/vue-3-ts-demo/node_modules/webpack/types"  Require statement not part of import statement`.  

Я установил webpack 5.65.0

Мои пакеты.json:

 {  "name": "vue-3-ts-demo",  "version": "0.1.0",  "private": true,  "scripts": {  "serve": "vue-cli-service serve",  "build": "vue-cli-service build",  "lint": "vue-cli-service lint"  },  "dependencies": {  "core-js": "^3.6.5",  "vue": "^3.0.0",  "vue-router": "^4.0.0-0",  "vuex": "^4.0.0-0"  },  "devDependencies": {  "@typescript-eslint/eslint-plugin": "^4.18.0",  "@typescript-eslint/parser": "^4.18.0",  "@vue/cli-plugin-babel": "~4.5.0",  "@vue/cli-plugin-eslint": "~4.5.0",  "@vue/cli-plugin-router": "~4.5.0",  "@vue/cli-plugin-typescript": "~4.5.0",  "@vue/cli-plugin-vuex": "~4.5.0",  "@vue/cli-service": "~4.5.0",  "@vue/compiler-sfc": "^3.0.0",  "@vue/eslint-config-typescript": "^7.0.0",  "eslint": "^6.7.2",  "eslint-plugin-vue": "^7.0.0",  "sass": "^1.26.5",  "sass-loader": "^8.0.2",  "typescript": "~4.1.5",  "webpack": "^5.65.0"  } }   

Это новый проект vue, и в чем проблема?

Комментарии:

1. Проекты Vue CLI используют Webpack под капотом, поэтому нет необходимости устанавливать его самостоятельно. Однако для использования Webpack 5 вам необходимо использовать Vue CLI 5. Вы бы настроили Webpack с configureWebpack chainWebpack помощью параметров или конфигурации. Почему вы пытаетесь импортировать webpack ?

2. @tony19. Спасибо. Я использую return new webpack.BannerPlugin(' xxx') в configureWebpack,поэтому мне нужно определить const webpack = require('webpack'); . Когда я удаляю пакет webpack. в нем есть ошибка» Не удается найти веб-пакет модуля», когда я использую vue-cli-service serve для запуска

3. @tony19 Я нахожу решение моего первоначального вопроса в том, что мне нужно добавить '@typescript-eslint/no-var-requires': 0 .eslintrc.js правила. Но проект все еще не мог запуститься с новыми ошибками, как сказано в комментарии выше

4. @tony19. Еще раз спасибо,я установил webpack 4.x, и теперь он работает. (мой vue lic тоже 4.x)

Ответ №1:

Ошибки являются модульными «d:/learning/vue-3-ts-demo/node_modules/webpack/types»

Инструкция Require не является частью инструкции import`.

Для этой ошибки я удаляю ее, добавив в '@typescript-eslint/no-var-requires': 0 .eslintrc.js

 rules: { '@typescript-eslint/no-var-requires': 0 }  

Я установил webpack 5.65.0

Поскольку мой интерфейс командной строки vue 4.5.14, я также переустановил версию webpack как 4.x, и она, наконец, заработала.