vue+typescript+elementui浏览器兼容性2

进展

经过数个demo的测试，初步得到结论：无需做特殊配置vue2+typescript+elementui就可以兼容上一篇说的浏览器

兼容性问题：外部插件并非es5版本的语法，导致ie兼容异常

针对该问题，vue也有对应的解决方案。配置也比较简单。解决问题的原理是这样的：由于vue-cli默认不会编译node-module下的所有的文件，而有时候我们一来的第三方插件都是安装在node-module下面，因此，我要做的就是告诉vue有一些包我们还是需要编译的。

比如，项目里头运用了如下的依赖：

    "@ckeditor/ckeditor5-build-classic": "^24.0.0",
    "@ckeditor/ckeditor5-upload": "^24.0.0",
    "@ckeditor/ckeditor5-vue2": "^1.0.5",

ckeditor就不是es5版本的，因此为了使用它我们就需要将ckeditor的进行转译成es5。

转译方法：使用

transpileDependencies

具体操作：

0、首先在ie上找出出现问题的依赖，寻找方式如下：

点击报错的位置chunk-vendors.js(34,1)，会跳转到具体报错的位置，如下。重点关注我圈起来的位置：

从被我圈起来位置可以知道是ckeditor.js出现问题了。但是不用管具体哪个文件，只需要关注这个文件在node-module下的哪个文件夹里头（ckeditor.js在@ckeditor文件夹里头），我们下面要配置的时候只看这个文件夹。

1、因为我使用的vue2.6.11，没有webpack的配置文件，使用的是在根目录自建的配置文件vue.config.js

2、vue.config.js里头在module.exports里头添加如下配置，意思是需要转译node-module下的@ckeditor文件夹下的js文件：

 transpileDependencies:['@ckeditor'],

有部分人可能没有这个配置文件信息，我附上（个人使用的，仅供参考）：

const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    transpileDependencies:['@ckeditor'],
    lintOnSave: false,
    publicPath: './',//打包后的位置(如果不设置这个静态资源会报404)
    outputDir: 'dist',//打包后的目录名称
    assetsDir: 'static',//静态资源目录名称
    // 这里配置去除打包之后会生成sourcemap的.map文件
    productionSourceMap: process.env.NODE_ENV === 'production' ? false : true,
    devServer: {
        // 这里配置端口号
        port: 8080
    },
    chainWebpack: (config)=>{
        config.resolve.alias
            .set('@', resolve('src'))
            .set('components',resolve('src/components'))
            .set('st',resolve('/static'))
    },
    configureWebpack:{
        externals: {
            'vue': 'Vue',
            'vue-router': 'VueRouter',
            'element-ui': 'ELEMENT',
            //         'vuex':'Vuex',
            'axios':'axios'
        }
    }
}

3、运行项目，发现打包出现警告了，提取重点警告信息：

[BABEL] Note: The code generator has deoptimised the styling of "unknown" as it exceeds the max of "500KB".

出现这个问题比较简单哈，在项目根目录下的babel.config.js里头添加如下配置：

"compact": false

附上babel.config.js的全量配置：

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    "compact": false
}