vue项目打包失败问题记录

这篇具有很好参考价值的文章主要介绍了vue项目打包失败问题记录。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目"vue": "^2.7.14"版本

起因:项目里安装了openlayers最新版本的地图插件,打包会成功,但是打包页面会有红色提示

          刚开始根据红色提示百度找到相同错误的方法提供了的一系列提示安装啊,卸载,装了   

          node-modules,又卸了来来回回搞了好几遍没用,因为当时也不知道什么原因, 网上粘贴

         一顿操作几遍后,成功的变成下面这种错误提示,最重要的是打包不会成功。

报错粘贴的内容

> vue-admin@1.0.0 build D:\survey_institute\construction
> node build/build.js

npm does not support Node.js v14.11.0
You should probably upgrade to a newer version of node as we
can't make any promises that npm will work with this version.
You can find the latest version at https://nodejs.org/
npm WARN config cache-max This option has been deprecated in favor of `--prefer-online`
npm WARN config cache-min This option has been deprecated in favor of `--prefer-offline`.
npm WARN config optional Use `--omit=optional` to exclude optional dependencies, or
npm WARN config `--include=optional` to include them.
npm WARN config
npm WARN config     Default value does install optional deps unless otherwise omitted.
npm WARN config shrinkwrap Use the --package-lock setting instead.
npm WARN config sso-poll-frequency The --auth-type method of SSO/SAML/OAuth will be removed in a future
npm WARN config version of npm in favor of web-based login.
npm WARN config sso-type The --auth-type method of SSO/SAML/OAuth will be removed in a future
npm WARN config version of npm in favor of web-based login.
npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
npm WARN config location in the cache, and they are managed by
npm WARN config     [`cacache`](http://npm.im/cacache).
- building for production...(node:3884) Warning: Accessing non-existent property 'cat' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:3884) Warning: Accessing non-existent property 'cd' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'chmod' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'cp' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'dirs' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'pushd' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'popd' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'echo' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'tempdir' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'pwd' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'exec' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'ls' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'find' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'grep' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'head' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'ln' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'mkdir' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'rm' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'mv' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'sed' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'set' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'sort' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'tail' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'test' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'to' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'toEnd' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'touch' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'uniq' of module exports inside circular dependency
(node:3884) Warning: Accessing non-existent property 'which' of module exports inside circular dependency
| building for production...(node:3884) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
- building for production...(node:3884) DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.
\ building for production...
Starting to optimize CSS...
Processing static/css/app.db377778205ecaa3facd8be79f3f9c84.css...
D:\survey_institute\construction\node_modules\optimize-css-assets-webpack-plugin\index.js:31
  return this.options.cssProcessor.process(css, Object.assign({ to: assetName }, this.options.cssProcessorOptions));
                                   ^

TypeError: this.options.cssProcessor.process is not a function
    at OptimizeCssAssetsPlugin.processCss (D:\survey_institute\construction\node_modules\optimize-css-assets-webpack-plugin\index.js:31:36)
    at D:\survey_institute\construction\node_modules\optimize-css-assets-webpack-plugin\index.js:69:12
    at Function.each (D:\survey_institute\construction\node_modules\underscore\underscore-node-f.cjs:1323:7)
    at Compiler.<anonymous> (D:\survey_institute\construction\node_modules\optimize-css-assets-webpack-plugin\index.js:58:7)
    at Compiler.applyPluginsAsyncSeries (D:\survey_institute\construction\node_modules\tapable\lib\Tapable.js:206:13)
    at Compiler.emitAssets (D:\survey_institute\construction\node_modules\webpack\lib\Compiler.js:354:8)
    at onCompiled (D:\survey_institute\construction\node_modules\webpack\lib\Compiler.js:240:9)
    at D:\survey_institute\construction\node_modules\webpack\lib\Compiler.js:510:14
    at next (D:\survey_institute\construction\node_modules\tapable\lib\Tapable.js:202:11)
    at Compiler.<anonymous> (D:\survey_institute\construction\node_modules\webpack\lib\CachePlugin.js:78:5)
    at Compiler.applyPluginsAsyncSeries (D:\survey_institute\construction\node_modules\tapable\lib\Tapable.js:206:13)
    at D:\survey_institute\construction\node_modules\webpack\lib\Compiler.js:507:11
    at Compilation.applyPluginsAsyncSeries (D:\survey_institute\construction\node_modules\tapable\lib\Tapable.js:195:46)
    at D:\survey_institute\construction\node_modules\webpack\lib\Compilation.js:683:19
    at Compilation.applyPluginsAsyncSeries (D:\survey_institute\construction\node_modules\tapable\lib\Tapable.js:195:46)
    at D:\survey_institute\construction\node_modules\webpack\lib\Compilation.js:674:11
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-admin@1.0.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-admin@1.0.0 build 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:\Program Files\nodejs\node_cache\_logs\2022-11-16T01_47_31_678Z-debug.log
 

1.首先解决的是vue项目打包失败问题记录

 我查看了我的node版本

vue项目打包失败问题记录

与官网显示的node版本是对应的

详细官网  

https://nodejs.org/zh-cn/download/releases/

至于为什么出现这个vue项目打包失败问题记录

是我首先粘贴了这个问题去往了百度,安装了一个npm @laster 坑了我一把,很明显我的package.json的内容里多一个npm的版本8点多,这就造成我的项目能启动,但是打包一直再报版本不符合,首先卸载了npm 版本8.19.3,不会有npm does not support Node.js 版本了,

vue项目打包失败问题记录

2.又来到了this.options.cssProcessor.process is not a function

vue项目打包失败问题记录

 网上找了一大堆方法,

  1. 什么在项目依赖 node_modules 里面找到 optimize-css-assets-webpack-plugin依赖删除 然后重新 npm i 这方法可能管用,但是在我的项目丝毫不起作用,这玩意我也是卸载安装好多遍,毙掉此方法
  2. 找到build文件目录下的build*webpack.prod.conf.js*
    注释掉
    // const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
    
            // new OptimizeCSSPlugin({
            //   cssProcessorOptions: {
            //     safe: true
            //   }
            // }),
    

    这两串代码我也注释过;没啥用,我又放开了;

后面找出原因估计就是因为刚开始打包的错误提示安装了一些影响项目的插件,项目能启动就是打不了包,

最后找到我类似这个项目的其他项目能打包成功的package.json复制到我这个项目,删掉node-modules,重新npm i,能打包成功,回到我刚开始的打包成功,有错误提示,最后的最后降低我的openlayers版本,最后package.json里面内容对比(编辑器里为我项目现在package.json,txt文本为我之前打包失败的package.json),txt文本里有的可能就是我按照错误提示安装没有必要的东西,

vue项目打包失败问题记录

有时候安装的插件版本过高会导致打包失败或者有错误提示,千万别粘贴类似于

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue-admin@1.0.0 build: `node build/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue-admin@1.0.0 build 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:\Program Files\nodejs\node_cache\_logs\2022-11-16T01_47_31_678Z-debug.log

那种红色错误提示去百度安装一些无用的东西,然后坑到你怀疑人生,你只需要降低版本就好了。文章来源地址https://www.toymoban.com/news/detail-409831.html

到了这里,关于vue项目打包失败问题记录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue项目版本打包更新后文件及浏览器存在缓存问题解决方案

    在vue.config.js中配置output,打包后的文件会带时间戳 在public/static目录下新建version.json文件  在src中新建 utils文件夹 文件夹中新建versionUpdate.js文件  在src文件夹下创建addVersion.js  写法二 修改package.json中scripts中的打包命令 版本号自加使用fs修改文件来实现 具体思路是:在执行

    2024年02月11日
    浏览(46)
  • iOS问题记录 - Xcode 14安装低版本iOS模拟器(持续更新)

    最近客服跟我反馈说,有一个用户打开老项目的iOS App闪退,我回顾了下这项目上次发布改了啥,发现就改了一些文本和链接,这就很奇怪。到后台查了下这个用户的设备信息和应用版本,用的是手机型号是iPhone X,系统版本是iOS 11.2,以及最新版的应用。 很长时间都忙着Flu

    2024年02月15日
    浏览(54)
  • uniapp+vue3打包问题记录

    **背景:**打包app出现问题,只显示底部导航的文字,其他一片空白 1. pages.json文件 :tabBar中的iconPath图标格式不支持svg,只支持:png, jpg, jpeg的格式,当图片改为.png的时候可以正常显示 2. 适配插件的影响 :使用了postcss-pxtorem插件,同时安装了lib-flexible插件,但因为lib-flexib

    2024年01月16日
    浏览(43)
  • HarmonyOS开发:解决DevEco Studio低版本导入高版本项目运行失败问题

    基于 DevEco Studio 4.0 Beta2,hvigorVersion为3.0.2 ,开发了一个项目,上传到了远程仓库,当同事下载后,却始终无法运行,频繁报错,由于API都是使用的9,第一感觉就是开发环境不同,于是,让其发来了他的开发环境, DevEco Studio 3.1.1 Release,hvigorVersion为2.4.2 ,果然是环境不同

    2024年02月05日
    浏览(54)
  • 记录一下公司uniapp项目安装node_modules失败问题

    刚开始把代码拉下来没有安装node_modules直接用hbuildx工具运行在小程序模拟器中,但是启动不起来,提示找不到\\\'uni-read-pages\\\'模块  然后我就npm install 一下,结果安装失败,翻译过来是报的什么字符错误信息,然后百度了一下好像是node版本和npm版本的问题,我当时的node版本是

    2024年02月02日
    浏览(42)
  • Vue项目打包问题(生产环境样式失效)

    在公司项目发布上线后,出现了部分样式失效的问题。我们引用的是vuetify第三方库,经过检查,发现是部分样式被vuetify自带的css样式给覆盖,原因是生成环境的打包模式与开发环境不同。 生产模式(env.prod) 在 生产模式 下打包,项目会被最小化,所有的css代码会被提取出

    2024年02月11日
    浏览(91)
  • vue项目打包时因为图片问题报错

    执行 npm run build 命令打包项目时报错,看起来是图片的问题: package.json 里面 image-webpack-loader 的版本是 ^7.0.1 解决方案: 1、先卸载 npm uninstall image-webpack-loader 2、用 cnpm 重新安装 cnpm install image-webpack-loader --save-dev 执行上面两条命令后 image-webpack-loader 的版本是 ^8.1.0 ,然后再执

    2024年04月27日
    浏览(33)
  • 记vite打包vue项目内存溢出问题解决

    出现问题 解决方法一: 1.根据网上的资料是通过全局下载npm包increase-memory-limit: 2.在项目目录执行命令: 3. 如果报错就搜索node_modules目录下的.bin目录中的 “%_prog%” 替换为 %_prog% 解决方法二(我的解决方法): 1.全局安装cross-env 2.在package.json的scripts中的build执行命令中增加

    2024年02月12日
    浏览(37)
  • Maven项目打包,出现提示 Lombok 版本和 jdk 的编译器不兼容问题,解决办法。

    class lombok.javac.apt.LombokProcessor (in unnamed module @0x7d21852b) cannot access class com.sun.tools.javac.processing.JavacProcessingEnvironment (in module jdk.compiler) because module jdk.compiler does not export com.sun.tools.javac.processing to unnamed module @0x7d21852b 这些引用都是关于Java编译器插件Lombok的错误信息。Lombok是一个

    2024年02月05日
    浏览(53)
  • vite vue3项目打包部署空白页面问题的处理

     问题:vite vue3项目打包部署上线后,发现是空白页面问题的处理 解决方法:1.在我们vite.config.js文件中检查是否有路径的指向                                       2.查看我们的路由模式,将路由模式修改为createWebHashHistory                           

    2024年02月11日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包