环境
Node.js版本
$ node -v v16.14.0
依赖包 package.json
{ "name": "vue-print", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "vue": "^2.6.14", }, "devDependencies": { "@vue/cli-service": "~5.0.0" "vue-template-compiler": "^2.6.14" } }
问题描述
在 vue.config.js 配置文件中引入了新的loader: twig-loader
// vue.config.js module.exports = { chainWebpack: (config) => { // twig rule loader const twigRule = config.module.rule('twig') twigRule.exclude.add(/node_modules/) // 添加新的loader处理 twigRule .test(/\.twig$/) .use('twig-loader') .loader('twig-loader') .end() }, }
启动服务，报错如下
bogon:vue-demo hina$ npm run serve > vue-print@0.1.0 serve > vue-cli-service serve INFO Starting development server... ERROR Failed to compile with 1 error 15:36:24 error in ./node_modules/.pnpm/twig@1.15.4/node_modules/twig/twig.js Module not found: Error: Can't resolve 'path' in '/Users/user/Desktop/vue-demo/node_modules/.pnpm/twig@1.15.4/node_modules/twig' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ERROR in ./node_modules/.pnpm/twig@1.15.4/node_modules/twig/twig.js 435:17-32 Module not found: Error: Can't resolve 'path' in '/Users/user/Desktop/vue-demo/node_modules/.pnpm/twig@1.15.4/node_modules/twig' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } @ ./src/print-template.twig 1:11-31 @ ./node_modules/.pnpm/vue-loader@15.10.0_k6i3prjitaqwfioy7oeoeqebte/node_modules/vue-loader/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js& 4:0-49 16:17-30 @ ./src/App.vue?vue&type=script&lang=js& 1:0-180 1:196-199 1:201-378 1:201-378 @ ./src/App.vue 2:0-55 3:0-50 3:0-50 9:2-8 @ ./src/main.js 2:0-27 13:13-16 webpack compiled with 1 error
问题解决
报错提示很明确了
If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false }
修改配置文件即可
方式一：
// vue.config.js module.exports = { configureWebpack: { resolve: { fallback: { path: false }, }, }, chainWebpack: (config) => { // twig rule loader const twigRule = config.module.rule('twig') twigRule.exclude.add(/node_modules/) // 添加新的loader处理 twigRule .test(/\.twig$/) .use('twig-loader') .loader('twig-loader') .end() }, }
方式二：
安装依赖
npm i path-browserify
修改配置文件
// vue.config.js module.exports = { configureWebpack: { resolve: { fallback: { path: require.resolve('path-browserify'), }, }, }, chainWebpack: (config) => { // twig rule loader const twigRule = config.module.rule('twig') twigRule.exclude.add(/node_modules/) // 添加新的loader处理 twigRule .test(/\.twig$/) .use('twig-loader') .loader('twig-loader') .end() }, }
参考
Module not found: Error: Can‘t resolve ‘path‘ in ‘/Users/wangabai/Desktop/学习/vue/code/vue3.2-element
