利用vite.config.js构建vue2项目的问题点

1. 修改 vite.config.js 的配置，安装 vite 对 vue2 插件的支持

vite 需要安装 vite3.x 版本

pnpm i vite@3.0.0 -D

pnpm i vite-plugin-vue2 -D
或
pnpm i @vitejs/plugin-vue2 -D

// import { createVuePlugin } from 'vite-plugin-vue2' // 仅支持Vue 2.6或更早版本
import vue from '@vitejs/plugin-vue2' // 只支持vue (>=2.7.0)的版本

export default {
  plugins: [
    // createVuePlugin(),
    vue()
  ]
}

2. vue 与 vue-template-compiler 需要同一个版本

pnpm i vue@2.7.16  vue-template-compiler@2.7.16 -S

3. 环境变量的获取问题

官方文档

获取环境变量的方法：import.meta.env.VITE_APP_BASE_API

4. Echarts 局部引入报错：TypeError: Cannot read property ‘findAxisModel’ of undefined

在 Echarts 局部引入依赖的时候，如果有需要用到的依赖没有引入就会报错，比如在使用柱状图+极坐标显示环形图的时候，如果没有引入 ploar 就会出现标题的报错，这时候只要引入这个依赖就好了：

import 'echarts/lib/component/polar'

5. 引入scss全局变量文件

 css: {
   // CSS 预处理器
   preprocessorOptions: {
     // 定义全局 SCSS 变量
     scss: {
       javascriptEnabled: true,
       additionalData: `@import "./src/styles/variables.scss";`
     }
   }
 }

6. 使用vite官方提供的方式，获取图片的路径

/**
 * 使用vite官方提供的方式，获取图片的路径
 *
 * @param {*} url
 * @returns {*}
 */
export const getViteImageUrl = function (url) {
  return new URL(`/src/assets/${url}`, import.meta.url).href
}