vue中加载OCX控件（IE浏览器执行）

如何注册ocx控件

ocx 控件：它是可视化编程工具，就是工具条上的那些小按钮。每个控件都有自己的事件、方法和属性。使用了控件的编程非常容易
控件需要先注册才可以使用：如果给exe文件，直接用即可

把要注册的OCX控件放在系统目录下。
　　32位系统将其复制到 C：\windows\system32\ 目录下。
　　64位系统将其复制到 C：\Windows\SysWOW64\ 目录下。和C：\windows\system32\目录都放一份。
用“管理员身份”运行命令提示符。

开始–搜索命令提示符–右击选择以管理员身份运行。

32位系统输入 regsvr32 c:\Windows\system32\xxx.ocx 回车。

64位系统输入：regsvr32 c:\Windows\SysWOW64\xxx.ocx 和 regsvr32 c:\Windows\system32\xxx.ocx

当我们看到DllRegisterServer在C:\windows\sysWOW64\xxx.ocx 已成功的提示，那么就已经注册成功了。

ActiveXObject对象

JavaScript中ActiveXObject对象是启用并返回 Automation 对象的引用。
使用方法：
newObj = new ActiveXObject( servername.typename[, location])

servername是必选项。提供该对象的应用程序的名称。
typename是必选项。要创建的对象的类型或类。
location是可选项。创建该对象的网络服务器的名称。

切记：ActiveX是微软的东西，故而这玩意儿只有IE才支持！

对IE浏览器操作（开启internet的加载activex控件） （默认开启）
打开Internet Explorer “工具”的“Internet选项”一栏—“安全”----“自定义级别”选项卡 ---- 》“对没有标记为安全的activex控件进行初始化和脚本运行”设置成“启用”即可。

npm切换镜像以及解决cnpm无法使用的问题（windows）

npm install -g cnpm --registry=http://registry.npm.taobao.org

cnpm无法加载问题：以管理员身份打开powershell

cmd打开窗口
输入PowerShell确定，以当前用户身份启动
start-process PowerShell -verb runas 确定，以管理员身份启动
set-ExecutionPolicy RemooteSigned 确认

babel的使用

针对es6语法如何在除chrome浏览器，到更低版本的浏览器中使用js

npm install --save-dev babel-loader @babel/core @babel/preset-env

babel-loader 是翻译器
babel-core 是核心库
@babel/preset-env 真正的翻译（箭头函数es6 -> es5）
@babel/polyfill 功能强大
npm install --save @babel/polyfill // promise（类，对象）和 map方法，—》打包为带有实线的函数

全局引入 import '@babel/polyfill'
按需引入 webpack配置

// webpack中的配置
module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader'，options: {presets: [['@babel/preset-env'，{useBuiltIns: 'usage' // 告诉@babel/polyfill按需引入}]]}}}]
}

–save 开发和项目运行都需要的依赖 (对应dependencies)
-save-dev 开发依赖，当项目部署了就不需要了，如webpack,gulp,babel (对应devDependencies)
npm 5 + 默认安装的模块是添加到dependencies列表中，较老的必须指定–save参数

前面都是废话，实操如下

使用vue加载activeX控件

下载给定的ocx并运行
修改配置文件，在IE中执行（需要配置babel）

// vue.config.js
const path = require('path')
function resolve(dir) {return path.join(__dirname, dir)
}
module.exports = {publicPath: './',// 生产环境构建后的存放目录outputDir: './dist',// 是否生成 js sourcemap 文件，设置为 false 以满足安全测试要求productionSourceMap: false,css: {// 是否生成 css sourcemap 文件，设置为 false 以满足安全测试要求sourceMap: false},configureWebpack: {resolve: {alias: {'gxcaJs': resolve('src/utils/ggzy.js') // 导入ocx文件}}},// 需要babel转义的包transpileDependencies: ['microapp-plugin-apploader', 'microapp-framework-common', 'microapp-plugin-http']
};// babel.config.js
module.exports = {presets: [['@vue/app',{useBuiltIns: 'entry'},'stage-3']]
}
// package.json
{"name": "pub_source","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"core-js": "^3.8.3","vue": "^2.6.14"},"devDependencies": {"@babel/core": "^7.12.16","@vue/cli-plugin-babel": "~5.0.0","@vue/cli-service": "~5.0.0","vue-template-compiler": "^2.6.14"},"browserslist": ["> 1%","last 2 versions",]
}

IE浏览器配置
- 配置可信任站点，设置 ->安全或 Internet选项 -> 安全，找到可信站点配置：如果是在本机操作http:127.0.0.1, 如果是在mac上操作，则将启动的地址添加到可信站点即可
- 配置自定义安全级别：开启activeX功能
添加key（因为是签名，所以需要key）

最后看下控件的js代码（主要是new ActiveXObject这个对象即可）

 actx = new ActiveXObject("GXCA_GKEYINFO.GXCA_gKeyInfoCtrl.1");actx.xxx()即可