文章目录
- 前情提要
- 原因分析
- 实战解析
- 最后
前情提要
在经历了vite打包实战后，我入手了echart实战，线下运行一切正常，但是打包上线后出现了异常
TypeError: Cannot create property 'series' onstring '<IDOCTYPE html>,挑战又来了，又是一个学习的过程；
原因分析
在寻求了各方大佬的提议及本人实践最终问题得以解决，分析过程如下
- echart是否存在版本问题；
- 引入方式是否正确；
- 问题根源在何处
最终我从问题根源发现了猫腻，这个报错是说不能创建属性series为string,因为build后的代码是丑化的，所以只能回到项目代码；
项目代码中我使用了echart的主题，利用axios来读取json,这一步不能说把我害惨了，也只能说又促使我了解了更多的内容；
代码如下：
//获取本地json
onMounted(() => {
getChartData().then(res=>{
console.log(res);
})
echarts.registerTheme('wonderland', wonderland);
myChart = echarts.init(document.getElementById('chart'), 'wonderland');
// 绘制图表
myChart.setOption({
});
})
//getChartData.js
import httpRequest from '@/axios/index'
// 查询json
export function getChartData() {
return httpRequest({
url: '/src/assets/json/wonderland.json',
method: 'get',
baseURL:'',
})
}
echart的官方引入方式，这里我不去展开，关键说axios读取json会有什么后果：文件没有明确引入，打包工具不会解析到，也就是说打包后的文件里就没有json，线上项目拿不到配置当然报错
实战解析
那么既然发现了问题根源，就来尝试一下好的解决方案：
- 改用import 引入 json; 其实这里再引入js我们的程序就变味了，因为我在网上进行了大量的搜索web及vite的json读取方案，大多停留在dev环境中，具体打包工具如何去配置这些问题，站在应用角度其实不重要，因为json一般用在配置或者是请求当中，必要情况可以依靠服务器读取。但是站在学习角度，很重要，但是今天，我觉得我必须放它一马，来日再站
- json文件改用js文件，采用模块化形式导出,因为我们整个系统的运行基本依赖模块化，这样不论是打包的角度还是线下开发都十分合理；
这里有俩个题外话：
- echart的主题是支持js引入的，如果我用js就没有这一系列问题，但是json用户也大有人在，所以我不踩你也得踩，索性，我发表出来以供学习
- 静态资源打包配置vite官方有说法
了解了以上，我的实战如下：
//wonderland.js
export default {
"color": [
"#4ea397",
"#22c3aa",
"#7bd9a5",
"#d0648a",
"#f58db2",
"#f2b3c9"
],
"backgroundColor": "rgba(255,255,255,0)",
"textStyle": {}，
.....
}
//改写引入方式
import wonderland from '@/tool/wonderland'
onMounted(() => {
echarts.registerTheme('wonderland', wonderland);
myChart = echarts.init(document.getElementById('chart'), 'wonderland');
// 绘制图表
myChart.setOption({
});
})
到这里我的问题得以解决，线上也正常了，但是留下了一个疑问：
rollupOptions: {
output: { //静态资源分类打包
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/name-[hash].[ext]',
manualChunks(id) { //静态资源分拆打包
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
assetFileNames: 会把项目中依赖的文件，进行处理，例如你assets目录下有一张图片，但是你没有在项目中引入，打包会忽略；
我的疑问也在这里，import xx.js 就算是依赖引入，import xx.json却不被分包处理，为什么？求指教
最后
📚 vite专栏
☃️ 个人简介：一个喜爱技术的人。
🌞 励志格言: 脚踏实地，虚心学习。
❗如果文章还可以，记得用你可爱的小手点赞👍关注✅，我会在第一时间回、回访，欢迎进一步交流。
