Vue cli3 整合SuperMap巧遇js异步加载的坑
最近使用到superMap做三维地图，而项目又分为可视化大屏与后台管理系统两部分，所以项目配置了多入口，然引入cesium依赖就成了问题，在vue cli3 整合Cesium,处理build 时内存溢出问题虽然知道了整合原生的cesium的方法，
但是在实际开发中会发现superMap 官方扩展的接口是无法使用的，必须引入superMap官方重写的cesium.js才可以, 然而superMap官方并提供模块化的开发版本，所以只有使用原生script 引入了
一、使用script 标签加载cesium
于是我分别在public目录下创建了两个html文件
分别是admin 和screen,然后在页面中使用<script src="libs/Cesium/Cesium.js"></script>进行js引入，然而测试发现一个奇怪的问题是cli3的多入口。在初始化时会使用默认的index.html页面作为默认入口页面
发现我自己增加的script 都没有了。。。这个怎么办？于是想到了document.createElement("script");在vue 初始化的时候去动态加载js
于是引入了如下专门用于异步加载的函数
var Head = document.getElementsByTagName('head')[0], style = document.createElement('style');
//异步加载css,js文件
function linkScript(parm, fn) {
var linkScript;
if (/\.css[^\.]*$/.test(parm)) {
linkScript = document.createElement("link");
linkScript.type = "text/" + ("css");
linkScript.rel = "stylesheet";
linkScript.href = parm;
} else {
// debugger
linkScript = document.createElement("script");
linkScript.type = "text/" + ("javascript");
linkScript.src = parm;
}
Head.insertBefore(linkScript, Head.lastChild)
linkScript.onload = linkScript.onerror = function (res) {
if (fn) fn(res)
}
}
linkScript("libs/Cesium/Cesium.js");
admin.js中import '../../components/common/js/asyncLoadExtraAssest'引入
这样是可以将cesium加载进来
二、刷新cesium 实例丢失
然而在点击浏览器左上角刷新按钮强制刷新页面时发现cesium在window中的实例丢失了引起了undefined异常
三、第一种处理方案(原型缓存)
开始我想到了是否是因为刷新后页面间window 上的实例都清除了，于是想到使用Vue的实例原型来缓存第一次加载进来的cesium实例（使用到了函数柯里化来进行cesium缓存）最后发现没有任何作用
四、第二种处理方案(更改 script 为同步）
再后来打断点一跟发现，
不对其实，window中的cesium实例是存在的只是较晚于页面中加载地图的组件，于是想到了是script 中异步加载解析cesium.js的锅，于是想将script加载解析更改为同步执行；
但是这个想法好像行不通，document加载的script 默认就是异步，就算为其增加 async:false也没用（浏览器会自动屏弃掉）
五、第三种处理方案(使用HtmlWebpackPlugin插件）
于是有想到了使用 HtmlWebpackPlugin为其设置页面配置
增加一个mutilPageConfig.js来配置每个页面的属性
const fs = require("fs");
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 通过页面配置文件过去页面json
function generateByConfig() {
return JSON.parse(fs.readFileSync("./src/page.json"));
}
// 生成extraEntry
const extraEntry = generateByConfig();
let newExtraEntry = {};
// 生成HtmlWebpackPlugin
let extraHtmlWebpackPlugins = [];
for (let i in extraEntry) {
let chunk = i;
newExtraEntry[chunk] = extraEntry[i].path;
extraHtmlWebpackPlugins.push(
new HtmlWebpackPlugin({
filename: chunk + ".html",
template: "public/index.html",
chunks: [chunk],
title: extraEntry[i].title,
favicon:extraEntry[i].favicon,
iconfont:' <link rel="stylesheet" href="//at.alicdn.com/t/font_1668594_l9pybqe35u.css">',
widgets:' <link rel="stylesheet" href="libs//Cesium/Widgets/widgets.css">',
cesium:' <script src="libs/Cesium/Cesium.js"></script>',
})
);
};
// 复制静态资源
// extraHtmlWebpackPlugins.push(
// new CopyWebpackPlugin([
// {
// from: './src/assets/libs',
// to: 'libs',
// ignore: ['.*']
// }
// ])
// )
exports.extraEntry = newExtraEntry;
exports.extraHtmlWebpackPlugins = extraHtmlWebpackPlugins;
vue.config.js引入
const multiBuilder = require("./multiPageConfig");
const { extraEntry, extraHtmlWebpackPlugins } = multiBuilder;
module.exports = {
configureWebpack: {
entry: {
...extraEntry
},
plugins: extraHtmlWebpackPlugins,
}
}
再删除掉pages相关配置，运行发现提示
ERROR Failed to compile with 2 errors 11:17:52
This relative module was not found:
* ./src/main.js in multi (webpack)-dev-server/client?http://192.168.0.101:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js, multi (webpack)/hot/dev-server.js (webpack)-dev-server/client?http://192.168.0.101:8081/sockjs-node ./src/main.js
转念一想，糊涂这是cli2的加载方式，cli3使用的是pages进行配置的,于是我将pages恢复并修改为
发现
虽然页面一片空白，但是页面title也icon可以加载正确！
六、最终处理方案(使用pages属性配置外部资源）
有了上面的初步测试发现多个页面可以使用一个index.html，
于是再到vue官网去看看
这个比较坑的是平时喜欢使用中文版的
看中文翻译是否漏了一段 哎，看来英语很重要呀
有了上诉经历，现在基本明白怎么进行接下来的操作了
修改page中的配置来更改页面加载的外部资源，而上一步配置的mutilPageConfig可改下，进行配置整合，再运行发现页面OK了，刷新cesium也不会再丢失了
最后在完整配置如下
1、page.json
{
"index": {
"entry": "./src/views/admin/admin.js",
"template": "public/index.html",
"filename": "index.html",
"favicon": "public/favicon_management.ico",
"title": "后台管理系统",
"iconfont":" <link rel='stylesheet' href='//at.alicdn.com/t/font_1668594_l9pybqe35u.css'>",
"widgets":" <link rel='stylesheet'' href='libs//Cesium/Widgets/widgets.css'>",
"cesium":" <script type='text/javascript'' src='libs/Cesium/Cesium.js'></script>",
"chunks": ["chunk-vendors", "chunk-common", "index"]
},
"view": {
"entry": "./src/views/bigScreen/screen.js",
"emplate": "public/index.html",
"filename": "view.html",
"title": "可视化平台",
"favicon": "public/favicon_view.ico",
"iconfont":" <link rel='stylesheet' href='//at.alicdn.com/t/font_1668594_l9pybqe35u.css'>",
"widgets":" <link rel='stylesheet'' href='libs//Cesium/Widgets/widgets.css'>",
"cesium":" <script type='text/javascript'' src='libs/Cesium/Cesium.js'></script>",
"chunks": ["chunk-vendors", "chunk-common", "view"]
}
}
2、multiPageConfig.js
const fs = require("fs");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
const isProduction = process.env.NODE_ENV === 'production';
// 生成HtmlWebpackPlugin
let extraHtmlWebpackPlugins = [];
// 复制静态资源
extraHtmlWebpackPlugins.push(
new CopyWebpackPlugin([
{
from: './src/assets/libs',
to: 'libs',
ignore: ['.*']
}
])
)
if(isProduction){
extraHtmlWebpackPlugins.push(
new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true,
drop_debugger: false,
pure_funcs: ['console.log']//移除console
}
},
sourceMap: false,
parallel: true
}),
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8
})
)
}
// 通过页面配置文件过去页面json
function generateByConfig() {
return JSON.parse(fs.readFileSync("./src/page.json"));
}
// 生成extraEntry
const entryPages = generateByConfig();
exports.extraEntry = entryPages;
exports.extraHtmlWebpackPlugins = extraHtmlWebpackPlugins
3、index.js
const path = require("path");
const multiBuilder = require("./multiPageConfig");
const { extraEntry, extraHtmlWebpackPlugins } = multiBuilder;
const isProduction = process.env.NODE_ENV === 'production';
function assetsPath (_path) {
const assetsSubDirectory = isProduction ? './': '/';
return path.posix.join(assetsSubDirectory, _path)
}
module.exports = {
pages:extraEntry,
configureWebpack: {
output: {
sourcePrefix: ' '
},
amd: {
toUrlUndefined: true
},
resolve: {
// alias: {
// 'cesium': path.resolve(__dirname, '../',cesiumSource)
// }
},
plugins: extraHtmlWebpackPlugins,
module: {
rules: [
{
test: /\.(cur)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: assetsPath('cur/[name].[hash:7].[ext]')
}
},
],
unknownContextCritical: /^.\/.*$/,
unknownContextCritical: false
}
},
css: {
loaderOptions: {
postcss: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert: "px",
viewportWidth: 1920,
viewportHeight: 960,
unitPrecision: 3,
propList: ["*"],
viewportUnit: "vw",
selectorBlackList: ['.ignore', 'calc'],
minPixelValue: 1,
mediaQuery: false,
exclude: /((\/|\\)(node_modules|src)(\/|\\))/,
})
]
}
}
}
}
4、vue.config.js
const extraConfig = require('./configHelper/index.js')
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
devServer: {
port: 8081,
disableHostCheck: true,
},
pages: extraConfig.pages,
productionSourceMap: false,
configureWebpack: extraConfig.configureWebpack,
css: extraConfig.css
}
七、配置SuperMap全局构造
上面说到的将SuperMap重新过的Cesium.js整合到了项目中，也解决了页面刷新异步加载外部js 的问题，但是在全局使用SuperMap构造函数时还是会提示undefined，因为这里还需要将从SuperMap官网下载的
中的
这些扩展文件夹加入到vue的项目中去
1、首先将其拷贝到libs 文件夹下
2、在page.json中新增"superMap":"<script type='text/javascript' src='libs/SuperMap.Include.js'></script>",
如：
3、在index.html中新增<%= htmlWebpackPlugin.options.superMap %>
如：
4、现在就可以在项目中使用了
OK 到此问题总算解决了，也对js 异步加载和vue多入口配置有了进一步了解，特此记录希望对小伙伴有帮助，感谢你的阅读，如觉得ok请点赞或分享，赠人玫瑰手有余香，你会快乐开心每一天的。
