webpack 打包非utf-8编码包的解决办法!

最新推荐文章于 2023-04-08 21:14:25 发布
最新推荐文章于 2023-04-08 21:14:25 发布
阅读量3.5k 收藏 1
点赞数
文章标签： webpack javascript 操作系统 ViewUI
原文链接：https://my.oschina.net/u/3105272/blog/907864
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

这几天用vue写了一个项目, 由于我们写代码是基于utf-8编码的, 但是公司的后台环境是GBK编码的写出来的很久远的一个系统了, 我的项目放上去了 毫无疑问的汉字直接乱码了, 为了解决乱码问题也是头疼了好久

即使我把打包前的项目文件都改为GBK编码的, 但是webpack打包默认是utf-8的格式, 出来还是乱码.

后来在网上找了好久, wenpack有一个插件 下载下来以后, 在输出部分配置成自己想要的代码就行了! (需要注意的是, 不需要改变我们写的文件的编码方式! 它会从utf-8的编码方式自动向其他编码转换!) 点击直达 npm :( 用法上面说的很详细了); webpack-encoding-plugin;

如果有同是用vue2.0的朋友这里说一下配置方法: 在vue 项目中的build文件中 有 webpack.prod.conf.js 和webpack.dev.conf.js 两个配置文件 其中名称由dev的那个是 我们运行 npm run dev 这个命令时的打包文件, 我们没有必要在那个里面配置, 名称中有 prod 的js文件是我们打包要用到的js文件, 因此只需要在那个里面配置一下就行了! 打包最后在dist文件中生成的index.html 需要改成GBK编码存储的文件;

改变文件从UTF-8编码到GBK编码存储方法的方式, 如果是用的submit text 3 编辑器的话, 可以下载一个 GBK Support 的插件下载完成以后 在菜单栏的 file 选项中会有一个项 GBK or UTF8 ;鼠标选中它 选择 save with GBK 就行了!

转载于:https://my.oschina.net/u/3105272/blog/907864

webpack5常用配置--从零开始学webpack，搭建自己的脚手架
丑小鸭变黑天鹅的博客
04-01 4493
webpack入门学习一、是什么 一、是什么 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 我们来对上面的解释进行拆解： 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具 静态的static：这样表述的原因是我们
前端工程化实战 - Webpack 打包
时光海的博客
10-31 780
前端工程化实战 - Webpack 打包
Vue2 修改打包文件的编码格式（webpack-encoding-plugin）
一碗单炒饭的专栏
06-08 2157
使用 webpack-encoding-plugin 插件来完成打包文件的编码格式修改
Webpack官网案例 中文乱码问题完美解决
qq_37376117的博客
10-14 987
官网说index.html应该这样写 <!doctype html> <html> <head> <title>起步</title> </head> <body> <script src="main.js"></script> </body> </html> 但是会出现乱码，经过百度后知道解决方法 <!doctype html> <html&
webpack打包React项目后出现中文乱码的问题
柯晓楠
03-10 2712
问题： React项目用webpack打包后，部署到服务器上，然后直接访问打包后的index.html文件，出现了中文乱码问题。 解决方法： 在webpack打包时，使用 webpack-encoding-plugin 插件就可以解决。操作步骤如下： 第一步 安装webpack-encoding-plugin插件 cnpm i webpack-encoding-plugin -D 第二步...
Vue脚手架配置webpack（configureWebpack，chainWebpack）
最新发布
coding...
04-08 9926
Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的。这个库提供了一个 webpack 原始配置的上层抽象，使其可以定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。在vue.config.js文件下配置webpack，其他的就不说了，主要是configureWebpack以及chainWebpack，两个在文件内是可以同时使用的。选项提供一个对象，该对象将会被 webpack-merge 合并入最终的 webpack 配置。
webpack初级入门教程（一）
qq_44701475的博客
10-31 176
1.前提条件 检测电脑是否安装node环境、npm、cnpm 检测： node：node -v npm： npm -v cnpm：cnpm -v 2.安装环境 2.1安装node环境：双击node安装包 2.2node环境安装完了以后再次检测node -v、npm -v 2.3安装cnpm（淘宝镜像）npm install -g cnpm --registry=https://registry....
webpack@3基础配置学习
gaofeng6565的博客
09-11 589
注：此文中 webpack 使用的版本是 3.12.0，webpack-dev-server 2.11.5 1、全局安装webpack npm install webpack -g --save 2、创建项目并初始化 新建项目文件夹（例如：webpack-demo） vscode 打开此文件夹，初始化项目 npm init -y 3、在项目中安装 webpack 并添加 webpack 的配置信息 npm install webpack@3.12.0 -D // @3.12.0指定安装..
utf8-decode:以 UTF8 解码 JavaScript 字符串
06-26
在JavaScript中，处理UTF8编码的数据时，有时需要对其进行解码，以便正确显示或操作字符串内容。`utf8-decode`是一个JavaScript库，专门用于将UTF8编码的字节序列转换回可读的字符串。 **安装与使用** 要使用`utf8-...
webpack4性能优化小结——HMR、source-map、oneOf、babel缓存、 多进程打包、文件缓存、tree shaking、code split、dll、pwa、externals
猛猛的博客
01-16 1009
webpack性能优化： 开发环境性能优化 1）优化打包构建速度 —— HMR 2）优化代码调试—— source-map 生产环境性能优化 1）优化打包构建速度——oneOf、babel缓存、 多进程打包 2）优化代码运行的性能——文件缓存、tree shaking、code split、dll、懒加载和预加载、pwa、externals 开发环境配置–优化打包构建的速度 使用HMR（hot module repalcement），热模块替换，作用是一个模块发生改变，只会重新打包这个模块，而不是全部更
webpack完整教程（一）
mapbar_front的博客
05-22 4095
1,webpack是当前最火的项目压缩打包工具了吧！他的目标是把所有的包括js，css，image等都打包进一个bundle.js文件中，最后只需要引入这么一个文件就好了。2，webpack是在node环境下使用的，使用webpack之前必须先安装node，node的安装可以在官网下载地址。下载完成后检验一下，在终端（或者说是cmd命令行）输入node -v和npm -v，看是否下载完成。
Web项目控制台出现中文乱码问题的几种解决方式
qq_43276879的博客
04-25 1711
**首先，说下最有用的解决方式: ** 由于idea2019版本后，到bin目录，用记事本打开idea.exe.vmoption/idea64.exe.vmoption修改文件 是不被idea认可的，所以只能通过idea打开进行配置 （1）点击" Help" → “Edit custom VM options…” 如图所示： 末尾添加：-Dfile.encoding=UTF-8，然后重启id...
web属性设置编码类型 utf-8，GBK
weixin_30781631的博客
06-05 239
web项目运行时的项目名称设置 WebContext-root； web编码类型设置 1.Window-Preferences-General-Workspace 2.Window-Preferences-General-Editors-Text Editors-Spelling 3.右击左侧Package Explorer中相应的工程或者文件-Properties...
webpack 各种babel 转码
webxiaoma
08-01 1966
今天总结一下webpack 各种转码工具 的操作方法。一、基本命令： webpack // 最基本的启动webpack的方法 webpack -w // 提供watch方法；实时进行打包更新 webpack -p // 对打包后的文件进行压缩 webpack -d // 提供source map，方便调式代
Vue2之vue.config.js的webpack配置文件详解
Mr.小灰狼_随笔
02-25 1万+
Vue 之 vue.config.js 的webpack配置文件详解 目录 一、常用配置项 1、导出模块 2、publicPath 部署应用包的基本Url 3、outputDir 输出文件目录 4、assetsDir 打包后生成的静态资源目录 5、lintOnSave 6、productionSourceMap 生产环境的 source map 7、​​​​​​​devServer 8、css相关配置
html里显示中文字体乱码的解决办法
qq_31699161的博客
09-16 6691
遇到的问题： 在用webpack对自定义字体（网上下载的ttf字体文件）进行压缩打包时，遇到了页面显示英文正常，但是中文出现乱码的情况。 现象： 如图：world前的中文出现了乱码 现在来看webpack的相关配置： 这里对本地自定义的.ttf字体文件使用了file-loader加载器进行转码解析，没有问题。 上图这里是从网上下载的个性自定义ttf格式的字体文件 上图，这里是在样式文件中，...
老项目用webpack中文乱码问题解决记录
weixin_30729609的博客
09-08 634
有个很久（有多久呢，你还记得jquery1.6的年代吗。。。）的项目需要新加一些功能，又想使用新的生产力工具比如说webpack，es6，vue神马的。原来的项目整体都是用GBK编码的，这特么。。。坑怎么会少。。。 为了省事直接用了饿了么的element框架（只是改进后台管理系统的一部分页面，原来的保持不动），然后坑爹的就来了，中文乱码是妥妥的，google，百度搜了很久，很多人都说用we...
VUE新坑 中文乱码
热门推荐
qq_42098878的博客
07-15 1万+
VUE项目编写完成进入HTML出现中文乱码怎么解决 今天写VUE项目的时候，编写完项目，之后打开index.html的时候发现所有的中文均为乱码，之后着手解决这个问题发现了一个新坑 出现原因 如果没在webstorm中进行过特殊设置，默认的webstorm中的新创建的 .vue 文件的默认编码不是UTF-8而是其他的编码方式，所以在浏览器中打开会出现乱码 解决方式 解决方式1 将乱码文件（例如index.vue）以记事本的方式打开，之后点击另存为，右下角位置有对应的文件编码方式将这里更改，即可完成，之后文件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值