vite 静态资源打包配置，echart 主题引入，build上线问题，vue3-echart5使用_vite echart(1)

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端视频资料：

//获取本地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，线上项目拿不到配置当然报错

---

实战解析

那么既然发现了问题根源，就来尝试一下好的解决方案：

1. 改用import 引入 json; 其实这里再引入js我们的程序就变味了，因为我在网上进行了大量的搜索web及vite的json读取方案，大多停留在dev环境中，具体打包工具如何去配置这些问题，站在应用角度其实不重要，因为json一般用在配置或者是请求当中，必要情况可以依靠服务器读取。但是站在学习角度，很重要，但是今天，我觉得我必须放它一马，来日再站
2. json文件改用js文件，采用模块化形式导出,因为我们整个系统的运行基本依赖模块化，这样不论是打包的角度还是线下开发都十分合理；

这里有俩个题外话：

1. echart的主题是支持js引入的，如果我用js就没有这一系列问题，但是json用户也大有人在，所以我不踩你也得踩，索性，我发表出来以供学习
2. 静态资源打包配置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();
          }
        }
      }
    }

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-hHLryUj9-1715796970441)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】