前端 - 有见过这样报错的吗？vue项目打包报错，这样的如何处理？

Question

PS D:\ruanjian\WorckSpace\vueWindow\AiViews\ua-vue> npm run build:dev> projectname@0.1.0 build:dev D:\ruanjian\WorckSpace\vueWindow\AiViews\ua-vue> vue-cli-service build --mode dev --reportBrowserslist: caniuse-lite is outdated. Please run:  npx browserslist@latest --update-db  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating\  Building for dev... ERROR  Failed to compile with 11 errors                                                                                   下午7:39:15 error  in ./src/App.vue?vue&type=style&index=0&id=0c4d8cee&prod&lang=css        Syntax Error: TypeError: Object is not a function @ ./src/App.vue?vue&type=style&index=0&id=0c4d8cee&prod&lang=css 1:0-437 1:0-437 @ ./src/App.vue @ ./src/main.js @ multi ./src/main.js error  in ./node_modules/vant/lib/index.cssSyntax Error: TypeError: Object is not a function @ ./src/main.js 12:0-28 @ multi ./src/main.js error  in ./src/assets/css/base.cssSyntax Error: TypeError: Object is not a function @ ./src/main.js 10:0-31 @ multi ./src/main.js error  in ./src/components/Loading.vue?vue&type=style&index=0&id=000fedbf&prod&scoped=true&lang=scssSyntax Error: TypeError: Object is not a function @ ./src/components/Loading.vue?vue&type=style&index=0&id=000fedbf&prod&scoped=true&lang=scss 1:0-533 1:0-533 @ ./src/components/Loading.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/cusOperate/index.vue?vue&type=script&lang=js @ ./src/views/cusOperate/index.vue?vue&type=script&lang=js @ ./src/views/cusOperate/index.vue @ ./src/router/cusOperate.js @ ./src/router/index.js @ ./src/main.js @ multi ./src/main.js error  in ./src/components/Overlay.vue?vue&type=style&index=0&id=2e829f00&prod&scoped=true&lang=scssSyntax Error: TypeError: Object is not a function @ ./src/components/Overlay.vue?vue&type=style&index=0&id=2e829f00&prod&scoped=true&lang=scss 1:0-533 1:0-533 @ ./src/components/Overlay.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Loading.vue?vue&type=script&lang=js @ ./src/components/Loading.vue?vue&type=script&lang=js @ ./src/components/Loading.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/cusOperate/index.vue?vue&type=script&lang=js @ ./src/views/cusOperate/index.vue?vue&type=script&lang=js @ ./src/views/cusOperate/index.vue @ ./src/router/cusOperate.js @ ./src/router/index.js @ ./src/main.js @ multi ./src/main.js error  in ./src/components/answerAnimation.vue?vue&type=style&index=0&id=14159caa&prod&scoped=true&lang=scssSyntax Error: TypeError: Object is not a function @ ./src/components/answerAnimation.vue?vue&type=style&index=0&id=14159caa&prod&scoped=true&lang=scss 1:0-541 1:0-541 @ ./src/components/answerAnimation.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/cusOperate/index.vue?vue&type=script&lang=js @ ./src/views/cusOperate/index.vue?vue&type=script&lang=js @ ./src/views/cusOperate/index.vue @ ./src/router/cusOperate.js @ ./src/router/index.js @ ./src/main.js @ multi ./src/main.js error  in ./src/components/errorMessage.vue?vue&type=style&index=0&id=0224cbd0&prod&scoped=true&lang=scssSyntax Error: TypeError: Object is not a function @ ./src/components/errorMessage.vue?vue&type=style&index=0&id=0224cbd0&prod&scoped=true&lang=scss 1:0-538 1:0-538 @ ./src/components/errorMessage.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/cusOperate/index.vue?vue&type=script&lang=js @ ./src/views/cusOperate/index.vue?vue&type=script&lang=js @ ./src/views/cusOperate/index.vue @ ./src/router/cusOperate.js @ ./src/router/index.js @ ./src/main.js @ multi ./src/main.js error  in ./src/components/portraitTemplate.vue?vue&type=style&index=0&id=674db640&prod&scoped=true&lang=scssSyntax Error: TypeError: Object is not a function @ ./src/components/portraitTemplate.vue?vue&type=style&index=0&id=674db640&prod&scoped=true&lang=scss 1:0-542 1:0-542 @ ./src/components/portraitTemplate.vue @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/cusOperate/manage.vue?vue&type=script&lang=js @ ./src/views/cusOperate/manage.vue?vue&type=script&lang=js @ ./src/views/cusOperate/manage.vue @ ./src/router/cusOperate.js @ ./src/router/index.js @ ./src/main.js @ multi ./src/main.js error  in ./src/views/cusOperate/index.vue?vue&type=style&index=0&id=6d65b6ac&prod&scoped=true&lang=scssSyntax Error: TypeError: Object is not a function @ ./src/views/cusOperate/index.vue?vue&type=style&index=0&id=6d65b6ac&prod&scoped=true&lang=scss 1:0-552 1:0-552 @ ./src/views/cusOperate/index.vue @ ./src/router/cusOperate.js @ ./src/router/index.js @ ./src/main.js @ multi ./src/main.js error  in ./src/views/cusOperate/manage.vue?vue&type=style&index=0&id=d09d0836&prod&scoped=true&lang=scssSyntax Error: TypeError: Object is not a function @ ./src/views/cusOperate/manage.vue?vue&type=style&index=0&id=d09d0836&prod&scoped=true&lang=scss 1:0-553 1:0-553 @ ./src/views/cusOperate/manage.vue @ ./src/router/cusOperate.js @ ./src/router/index.js @ ./src/main.js @ multi ./src/main.js error  in ./src/views/cusOperate/portrait.vue?vue&type=style&index=0&id=09fb6db0&prod&scoped=true&lang=scssSyntax Error: TypeError: Object is not a function @ ./src/views/cusOperate/portrait.vue?vue&type=style&index=0&id=09fb6db0&prod&scoped=true&lang=scss 1:0-555 1:0-555 @ ./src/views/cusOperate/portrait.vue @ ./src/router/cusOperate.js @ ./src/router/index.js @ ./src/main.js @ multi ./src/main.jsError parsing bundle asset "D:\ruanjian\WorckSpace\vueWindow\AiViews\ua-vue\dist\js\chunk-0df1fee9.9901e462.js": no such fileError parsing bundle asset "D:\ruanjian\WorckSpace\vueWindow\AiViews\ua-vue\dist\js\chunk-30ccf824.fa538c0e.js": no such fileError parsing bundle asset "D:\ruanjian\WorckSpace\vueWindow\AiViews\ua-vue\dist\js\chunk-4b75b03a.47cad802.js": no such fileError parsing bundle asset "D:\ruanjian\WorckSpace\vueWindow\AiViews\ua-vue\dist\js\chunk-7d89df74.0d58002e.js": no such fileError parsing bundle asset "D:\ruanjian\WorckSpace\vueWindow\AiViews\ua-vue\dist\js\chunk-vendors.799952f3.js": no such fileError parsing bundle asset "D:\ruanjian\WorckSpace\vueWindow\AiViews\ua-vue\dist\js\index.b3218646.js": no such fileNo bundles were parsed. Analyzer will show only original module sizes from stats file. ERROR  Build failed with errors.npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! projectname@0.1.0 build:dev: `vue-cli-service build --mode dev --report`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the projectname@0.1.0 build:dev script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:npm ERR!     C:\Users\User\AppData\Roaming\npm-cache\_logs\2024-04-30T11_39_16_824Z-debug.logPS D:\ruanjian\WorckSpace\vueWindow\AiViews\ua-vue>

Answer 1

根据你提供的错误信息，问题可能出在以下几个地方：

1. "browserslist: caniuse-lite is outdated."：这是一个警告，不是错误。然而，更新 caniuse-lite 可以帮助你避免在未来的兼容性问题。你可以通过运行 npx browserslist@latest --update-db 来更新它。
2. "Syntax Error: TypeError: Object is not a function"：这个错误似乎是在处理你的 .vue 文件的样式部分时出现的。这可能是因为你使用的某些插件或加载器（例如sass-loader，css-loader等）版本不兼容或配置错误。
3. "Error parsing bundle asset..."：这个错误表明在构建过程中，某些预期存在的文件实际上并未生成。这可能是由于构建过程中的错误导致的。

对于上述问题，你可以尝试以下解决方案：

1. 更新 caniuse-lite：运行 npx browserslist@latest --update-db 来更新它。
2. 检查并更新你的加载器和插件：确保你正在使用的所有加载器（如sass-loader，css-loader等）和插件都是最新的，并且相互兼容。你可以查看它们的文档，了解是否有任何关于版本兼容性的说明。
3. 检查你的 .vue 文件：确保你的 .vue 文件中的样式部分没有问题。例如，如果你正在使用 SCSS 或其他预处理器，确保你的语法是正确的。
4. 清理并重新构建：有时，构建缓存可能会导致问题。你可以尝试删除 node_modules 文件夹和 package-lock.json 文件（如果存在），然后重新运行 npm install。之后，再尝试构建你的项目。

如果以上步骤都无法解决问题，那么你可能需要更深入地查看你的项目配置和代码，以找出具体的问题所在。你也可以尝试在相关的开发者社区（如 Stack Overflow）中寻求帮助，提供更多的错误信息或项目配置细节，以便他人能更好地帮助你。