前端知识
vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack
2024-03-29 15:03:20
283
370
vue前端页面弹出红色遮罩层错误 Uncaught runtime errors:×ERRORUnknown promise rejection reason at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:296:58) at eval _at handleerror (webpack-internal:///./node_modules/webpack-dev-server/client
2024-05-13 10:05:52
67
991
本人使用的是win11系统，node安装在了D盘，在前端项目中执行npm install的时候遇到了 npm install 报错其报错原因是大概是修改权限不足。原因1： 权限不足原因2：缓存出错原因3：npm版本不够原因4：网络不稳定原因5： 杀毒软件问题具体可以参考。_error: eperm: operation not permitted, rename
2024-05-24 08:05:28
540
431
不同环境下的打包，如果出现图片显示不了时（特别是css中的图片），请检查publicPath的配置。会开启tree-shaking和js代码压缩，但配置会使默认的压缩功能失效。所以，指定css压缩插件的同时，务必指定js的压缩插件。插件，结合配置，可以把css代码打包到单独的css文件，且可以设置存放路径（通过设置插件的filename和生产环境下不能使用devtool:"inline-source-map"，而用devtool:"source-map"_mini-css-extract-plugin
2024-05-20 14:05:35
487
680
一、什么是Webpack?Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。二、Webpack安装1、全局安装Webpack2、查看Webpack版本号webpack -v三、初始化项目—Webpack打包js文件1、首先在vscode工作空间中创建文件夹Webpackdemo。_打包html css js文件
2024-05-18 18:05:40
907
565
vue 脚手架项目，vue 2.0，npm install 报错，npm ERR! code 1npm ERR! path D:\Gree_project\web_cloud_wms\node_modules\node-sassnpm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable._npm err! code 1
前端知识
Vue-解决BREAKING CHANGE: webpack ＜ 5 used to include polyfills for node.js core modules by default.
2024-05-13 10:05:39
573
760
上述操作中使用了插件来解决在 Webpack 5 中缺少 Node.js 核心模块的问题。同时，我们通过修改配置来添加了fscrypto和stream模块的 polyfill。其次需要确保已经安装了和依赖。这样修改后，重新运行打包命令，你的代码应该可以正常编译和执行!希望有帮助到你（oi）_breaking change: webpack < 5 used to include polyfills for node.js core modu
2024-05-11 23:05:19
453
697
找不到html-webpack-plugin这个依赖插件，我们就安装这个依赖插件，然后再重新打包，咦，这样就解决了_cannot find module 'html-webpack-plugin
2024-05-10 22:05:35
475
399
在Vue中，代理（Proxy）是一种将请求转发到其他服务器的机制。它允许你在开发环境中通过一个中间层来处理网络请求，以解决跨域问题或将请求发送到不同的后端服务器。通过代理配置，你可以指定特定的URL路径，将其转发到不同的目标服务器。这在开发过程中特别有用，因为你可以将API请求代理到本地服务器或其他开发服务器，而无需直接连接到真实的后端服务器。devServer。_vue 代理
前端知识
vue中webpack配置compression-webpack-plugin打包压缩和优化，terser-webpack-plugin在构建过程中对 JavaScript 代码进行压缩和优化
2024-05-10 22:05:30
583
344
vue中webpack配置compression-webpack-plugin打包压缩和优化，terser-webpack-plugin在构建过程中对 JavaScript 代码进行压缩和优化_compression-webpack-plugin
2024-05-10 08:05:21
334
984
用webpack打包TS时遇到的问题一_to address issues that do not require attention, run: npm audit fix
2024-05-10 08:05:54
831
101
Vue3.2 vue/cli-service 打包 chunk-vendors.js 文件过大导致页面加载缓慢解决方案_chunk-vendors.js
2024-05-03 18:05:14
128
659
如果你看过好多教程之后，还是报错，无法使用tailwindcss，我希望本教程可以让你成功上岸。_vue2可以使用tailwindicss吗
2024-05-03 18:05:07
425
572
Webpack是一个功能强大的模块打包工具，而HtmlWebpackPlugin是Webpack的一个插件，用于生成HTML文件并自动注入打包后的资源。介绍了Webpack5中HtmlWebpackPlugin插件的用法及其各种配置选项。借助HtmlWebpackPlugin插件，我们可以方便地生成HTML文件并自动注入打包后的资源，同时还能对HTML进行压缩和定制化配置。_webpack5 html-webpack-plugin 模板文件
2024-04-29 11:04:49
468
594
Unexpected usage at EditorSimpleWorker.loadForeignModule 报错问题处理_error: unexpected usage at editorsimpleworker.loadforeignmodule
前端知识
npm下载慢、淘宝镜像源无效问题：npm ERR! code FETCH_ERRO、Rinvalid json response body at https://registry.npmjs.org
2024-04-29 11:04:49
17
392
npm下载慢、淘宝镜像源无效问题：npm install webpack -gnpm ERR! code FETCH_ERROR、invalid json response body at https//在使用npm命令的下载其他东西时候，很慢，卡很久。而且下载的淘宝源也没有生效.查看了npm的下载源发现还是npm官方的，npm源在国外，下载就很慢。没有切换成淘宝源的。所以这里要下载淘宝源并确保当前的源切换成了淘宝源了。_npm err! code fetch_error npm err! errno fetch_error npm err! invalid json r
2024-04-29 11:04:28
998
640
TypeScript简单介绍：总结优势：2.创建tsconfig.json命令：_vue2项目中配置typescript和javascript的兼容
2024-04-23 21:04:23
547
296
【代码】Error: Cannot find module ‘html-webpack-plugin‘_error: cannot find module 'html-webpack-plugin
2024-04-22 09:04:30
694
372
本文将介绍TypeScript这门类型安全的JavaScript的超集语言。TypeScript由微软开发，最初是为了解决JavaScript在大型项目中的缺陷而设计的。文章将首先讨论为什么TypeScript比纯JavaScript更好，并解释其在开发过程中的优势。其次，我们将探讨TypeScript的一些主要特性，包括类型注解、接口、类和模块等，并解释如何在这些特性的帮助下提高代码的可读性、维护性和可重用性。此外，文章还将讨论TypeScript与其他类型安全的语言（如Java和C#）之间的相似之处。_typescript全方位学习指南
2024-04-21 10:04:58
786
582
这只是一个简单的Vue项目目录结构示例，实际上，随着项目的复杂性增加和使用的工具和库的不同，目录结构可能会有所变化。Vue项目的目录结构通常是由Vue CLI（Vue命令行界面）生成的默认结构，它提供了一个基本的项目框架。通过将模板、脚本和样式集中在一个文件中，Vue文件提供了更高的可维护性和可读性，使得组件的开发更加方便和快速。：这是通过npm安装的第三方依赖库的目录，包含了项目所使用的所有依赖项。：这是存放可复用组件的目录，通常包含一些小型的、独立的Vue组件。_前端项目文件目录结构
2024-04-21 10:04:09
19
147
原文地址：https://segmentfault.com/a/1190000021518323作者：Fw恶龙本文首发于：思否一、前言先整理一波之前和webpack相关的文章:使用Webpack对CSS文件进行后处理基于Webpack的CSS Sprites实现方案Stylus系列——webpack-spritesmith配合stylus使用示例继以上第三篇文章...
2024-04-20 17:04:47
710
439
快速创建 Vue.js 项目的向导式用户界面：我们只需要按照界面上的步骤一步步操作，就可以快速创建一个 Vue.js 项目。支持自定义配置：Vue CLI 提供了多种配置选项，开发者可以根据自己的需求进行选择和配置。支持插件扩展：Vue CLI 支持插件化扩展，开发者可以根据需要安装插件，例如路由、状态管理等。支持开箱即用的工具集成：Vue CLI 集成了很多实用的工具，例如 Babel、Webpack、ESLint 等。_vue-cli
2024-04-15 21:04:19
1017
119
vue-devtools-简介、下载、安装、配置、使用_vue devtools
2024-04-15 09:04:34
693
928
Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:1:1)Uncaught TypeError: Failed to resolve module specifier "jquery". Relative references must start with either "/", "./", or "../"._uncaught typeerror: failed to resolve module specifier "jquery". relative re
2024-04-13 23:04:59
739
996
最近开发一个公司的官网项目，由于公司没有 UE， 领导就直接找了一个JQuery bootstrap 的项目模板要求在最快的时间里面把这个项目放到Vue框架里面。这个项目模板里面各种动画、图表都是引入的JQery插件，这就导致了，你的html文件里面会有很多是打包后的。这样虽然解决了问题，通过在 vite 搭建项目中 import 引入public下的图片、音频、视频都不会报错，并且在 vue templete 中直接通过给 img 标签的src赋值 /aaa.png 也是正常的。_can't be bundled without type="module" attribute
2024-04-08 11:04:02
476
903
我们在开发vue项目的时候，创建的时候可能会不小心选择了eslint，这个检测规则对于新手来说，简直就是噩梦，会让你崩溃。这些方法基本足以解决这个问题了，但是笔者还是建议各位有了一定开发经验的时候，用上这个检测文件，不仅能培养自己良好的编程习惯，而且容易和团队其他人保持一个风格。上图红框框部分，我项目中的文件内容是这样的，其他项目可能有别的一些内容，我们把框框中的内容注释掉或者去掉就可以了。有这个文件的话，就直接修改这个文件就可以解决。文件，把你不需要校验的文件添加进去即可，文件都不进行校验了，同理，_vue2关闭eslint
2024-04-05 09:04:36
120
227
找到 package.json 在 build 后面加 --report。new BundleAnalyzerPlugin 参数配置说明。_vuecli webpack-bundle-analyzer
2024-03-26 08:03:17
682
768
其中版本vue-loader@17.0.0，vue-template-compiler和vue都是2.7。百度之后看到有人说是vue-loader版本问题，然后在vue-loader的github的。意思是vue2的话，vue-loader版本要低于等于15。，卸载17版本的vue-loader后，再安装15版本的。，最终不再报错，并能对vue文件进行加载。_cannot read properties of undefined (reading 'styles')
前端知识
vue2/3 - 报错Feature flag __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined. You are r
2024-03-24 22:03:51
262
565
vue3，vue2，vite，webpack，vue3 vite，vue2 webpack，npm run dev，npm run serve，vue项目启动报错，vue警告，浏览器警告解决，Feature flag VUE_PROD_HYDRATION_MISMATCH_DETAILS is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time featu
2024-03-15 10:03:28
323
692
【vue】opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ] 报错解决_err_ossl_evp_unsupported
2024-03-12 01:03:17
282
204
2、 对 webpack 配置打包压缩，并在服务端加上支持gizp的配置，当浏览器请求时，服务端直接将资源返回给浏览器。1、在服务端开启压缩，当浏览器发起请求时，服务端对传输资源进行实时压缩，然后返回给浏览器。第二种则是打包后的 dist 文件包体积比较大（因为包含 .gz 文件和源文件）第一种是服务端进行实时压缩，对服务器的性能消耗较大。首先，安装 compression 插件。如下图，看到响应头中出现。_vue gzip
2024-03-08 10:03:18
39
526
vue项目启动报错_syntax error: error: postcss received undefined instead of css string
2024-03-07 08:03:17
954
535
本文主要讲了vue-config.js的几个常用配置项，和打包优化npm的插件。_transpiledependencies
2024-03-06 09:03:25
874
21
vue cli3 webpack精讲_configurewebpack详解
2024-03-04 10:03:33
583
324
此时有很大机率会出现权限问题，所以我们要么以管理员身份运行 cmd 窗口，在该窗口下切换路径，要么设置存放项目的文件夹属性。最好在其它盘里建一个文件夹来存放所创建的 vue 项目，由于小编只有一个C盘，所以我直接在 nodejs 文件下创建了一个 Data 文件夹来存放我创建的项目。：在设置环境变量后，一定要点击“确定”，每个对话框都要点“确定”才可设置成功！vue_test 项目创建成功！此时 node_modules文件夹还未生成，但是等我们把模块安装到全局目录下面时，系统会自动生成该文件夹。_nodejs安装vue
2024-03-02 09:03:21
922
191
凉哥作为 Vue 的忠诚粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下Vue框架背后的故事。_vue3要凉凉了
2024-02-28 11:02:49
365
79
Webpack：HTML Webpack Plugin插件，介绍Webpack前端项目中该插件的引入、配置和注意事项。_htmlwebpackplugin
2024-02-23 11:02:13
621
474
为什么 vite 既用了 esbuild 又用了 rollup?esbuild 在开发阶段（vite dev）使用，主要用来预编译第三方依赖和编译业务代码里的 typescript 代码。esbuild 在抹平了第三方依赖的语法差异（第三方依赖不一定是 ESM 的语法）的同时，保证了 vite dev 的开发速度。rollup 只会在 vite build 的时候执行构建，主要是构建生产环境可稳定使用的包，依然使用 rollup 是因为 rollup 成熟稳定，具有大量优秀的插件。_vite安装
2024-02-21 10:02:46
177
685
这些指南只是一些常见的版本兼容性指南。在实际项目中，取决于具体的应用场景和使用的组件库，不同版本之间可能还存在其它的兼容性问题。因此，我们建议使用最新版本的 Vue、Vue CLI、Webpack 和 Webpack CLI 来获得最佳的性能、安全性以及最新的功能和改进。同时，在使用前应该先了解相应版本的官方文档和版本兼容性指南。_vue 2.9.6支持哪个版本webpack
2024-02-13 10:02:16
409
274
背景：项目中需要使用模板html动态处理比如 icon 、title。我的项目里是需要在不同的打包指令下，打包的结果中index.html 中title 和 icon都不一致。之前的项目使用的是插件。安装该插件的使用需要注意你项目的webpack版本，安装对应的版本插件。本次因为项目是vite项目，所以采用插件。本文作为使用记录。结尾还有个疑问一直没有解决，欢迎大神留言解答一下。提示：以下是本篇文章正文内容，下面案例可供参考。_vite-plugin-html
2024-02-12 14:02:29
642
585
通过命名规范来限制类名太过死板，而 css in js 虽然足够灵活，但是书写不便。css module 开辟一种全新的思路来解决类名冲突的问题。
2024-02-06 15:02:07
836
878
pinia官方文档Pinia 的优点更多查看文档…在main.js中引入pinia并创建容器挂载到根实例上创建stores文件夹和index.js文件（这个文件以后基本不用管了）在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化）defineStore 是需要传参数的，然后再组件中使用：运行效果： 可以用vue3的调试工具看pinia案例需求，点击按钮加一：一个不解构，一个不解构看看区别。运行结_vue3-pinia的使用《三》
2024-02-06 15:02:11
252
100
它表明在代码中有一个意外的字符，尤其是一个不被期望的尖括号 _uncaught syntaxerror: unexpected token '<', "
2024-02-05 11:02:02
596
75
本文介绍了Vue中如何进行打包与部署，包括使用Webpack进行打包、使用Nginx进行部署和使用Docker进行容器化部署。这些方法都是常用的Vue应用程序的打包和部署方法，可以根据实际需要选择合适的方法进行部署。_vue 打包
2024-02-02 09:02:51
120
67
script-ext-html-webpack-plugin webpack插件做监控插入_scriptexthtmlwebpackplugin
2024-02-02 09:02:16
972
534
为大家介绍新一款的构建工具——Vite，当然我们Vite更多的是被用于开发阶段，下面也为大家介绍到了 Vite 想比于 webpack 编译中的优势，以及Vite构建Vue3项目的步骤教程，赶快跟着我尝试一下吧！_使用vite创建项目:project。参考下方效果图,在提供的素材文件里完成以下功能需求
2024-02-01 12:02:54
947
191
这时候使用transform-origin给一个0% 0% 上下，左右的偏移。这时候位置就回到了原先的定位。_transform-origin: 0 0;transform:scale()
2024-01-29 14:01:42
474
106
请记住，这些配置可能需要根据你的具体项目需求进行调整。如果你使用的是如 Create React App 或 Next.js 这样的构建工具，它们可能已经内置了对 Sass 的支持，你可能不需要手动更改 Webpack 配置。如果你想使用 CSS Modules（这允许你将 CSS 类名局部化，以避免全局冲突），你可以调整。如果你想将 CSS 提取到单独的文件中，而不是将它们注入到 JavaScript 中，你可以使用。文件中，你需要添加一个规则来告诉 Webpack 如何处理。的替代品，更快且更可靠）。
2024-01-28 12:01:01
160
758
Vue3安装配置、开发环境搭建（图文详细），一、vue的主要安装方式，二、node.js安装和配置，三、npm 安装vue 和脚手架、webpack模板，四、打开Vue 项目管理器，五、创建运行 vue 3 项目，六、使用TypeScript进行开发 Vue3 的代码，七、vue及组件的卸载，八、vue项目结构，九、Vue 安装过程中遇到的问题记录_vue3安装