做有态度的前端团队

网易FEG前端团队

解决fis3本地开发编译GBK页面的乱码问题

前言

之前大神写过一篇 【FIS 本地预览使用 NodeJS 服务器乱码问题解决办法】,解决了fis2编译gbk项目乱码的问题。后来小组推广fis3,fis3的server和fis2不同了:feg server open 打开 FIS 服务器的本地目录里面没有 server.js 这个文件,所以又出现了fis3编译gbk项目乱码问题。。。

简单分析

关于乱码分析,之前大神也写过一篇很详细的文章:【关于编码的那些事儿】
这里简单说一下:
决定chrome浏览器(可能每个浏览器表现不一样)最终显示的页面是否乱码是有三个因素决定的:

  • http 返回头 Content-Type

    fis server里面决定返回头编码

  • <meta charset="xxx">

    写代码的时候,在html头部决定的

  • 网页文件编码

    fis-conf.js的配置解决最终编译后的文件编码
    fis.set('charset', 'gbk');
    fis.set('project.charset', 'gbk');

只有这三个编码一致才不会乱码,缺一都会乱码,有兴趣的可以亲自测试下。

解决方案

大神之前的文章提到过,http 返回头是可以带有 charset 信息,所以,也就是可以不带了,也就是说三个因素,我们可以减少这个服务器的决定因素(我们网站为了推utf-8编码,服务器也取消了返回头带charset信息了)。
type01.png

解决步骤:

修改 fis3-server-nodeapp.js

在自己电脑本地,打开C盘,找到feg的安装路径(非server路径),具体路径如下图,找到 fis3-server-nodeapp.js 这个文件:
type02.png

我们需要修改一下脚本开头的代码,让它取消了返回头带charset信息。修改后的代码如下:

var express = require('express');
var args = process.argv.join('|');
var port = /\-\-port\|(\d+)(?:\||$)/.test(args) ? ~~RegExp.$1 : 8080;
var https = /\-\-https\|(true)(?:\||$)/.test(args) ? !!RegExp.$1 : false;
var path = require('path');
var DOCUMENT_ROOT = path.resolve(/\-\-root\|(.*?)(?:\||$)/.test(args) ? RegExp.$1 : process.cwd());
var bodyParser = require('body-parser')
var app = express();
var mime = require('mime-types');

app.use(function(req, res, next) {
    res.set({'Content-Type':  mime.lookup(req.path)+';charset='});
    next();
});

...

注意,一定要把修改返回头的 app.use() 代码段放在最前位置。

这里我们引入了一个新的包,var mime = require('mime-types');,这个包的作用是为了识别请求资源的 MIME 类型,然后返回正确的 MIME 值到 Content-Type 里。

复制一个 mime-types 包到 node_modules 目录里,就地取材,如下图:
type03.png

改完后重启 feg 服务器,清除缓存刷新浏览器,应该就可以看到正常的页面了。

手机阅读请扫描下方二维码:

已有 16 条评论

  1. dropping

    可以

    1. 0KeeTeam

      0KeeTeam

  2. 0KeeTeam

    0KeeTeam

  3. 0KeeTeam

    0KeeTeam

  4. 0KeeTeam

  5. 0KeeTeam

    atcckyxxxhsvgdudoocn

  6. atcckyxxxhsvgdudoocn

    0KeeTeam

  7. 0KeeTeam

    0KeeTeam

  8. 0KeeTeam

    0KeeTeam

  9. 0KeeTeam

    0KeeTeam

  10. 0KeeTeam

    0KeeTeam

  11. 0KeeTeam

    0KeeTeam

  12. upfohiqiallupqowctga

    0KeeTeam

  13. Crawlergo

    Crawlergo

  14. Crawlergo

  15. Crawlergo

    uyjpjeijjwclnceqtbhz

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif