更换原因：目前我使用webpack，使用jekins打包很慢，有时都无法忍受，所以我尝试了一下更换vite后进行打包，发现打包速度上真的会快很多，最主要的原因是因为cesium，vite提供了插件。

更换步骤：

1、添加依赖:package.json

yarn add vite

yarn add dotenv  (因为之前在webpack的时候，直接使用环境变量就好了，但是vite.config.js里面，自己定义的环境变量是获取不到的，所以只能获取文件，然后dotenv帮我转换成可读的环境变量进行使用，项目内的代码可以用import.meta获取)

yarn add vite-plugin-cesium  (这个是需要先安装cesium的，不能只安装这个，我之前的依赖里面已经包含的cesium，所以不需要安装这个依赖了)

yarn add vite-plugin-vue2  (针对vue2的vite插件)

如果你之前用的其他的例如：npm，cnpm的，统一命令安装

在package.json中的scripts中添加命令

"serve2": "vite",

 "build2": "vite build",

2、添加vite.config.js文件并添加配置，文件存放位置为：跟当初的vue.config.js同级目录下

import { createVuePlugin } from 'vite-plugin-vue2'
import cesium from 'vite-plugin-cesium';
import dotenv from 'dotenv';
const fs = require("fs")
const path = require("path")

// Dotenv 是一个零依赖的模块，它能将环境变量中的变量从 .env 文件加载到 process.env 中
const envFiles = [
  `.env.local`,
]

export default ({ command, mode }) => {
  if (mode !== 'development' && mode !== 'production') {
    envFiles.push(`.env.${mode}.local`)
  }
  for (const file of envFiles) {
    const envConfig = dotenv.parse(fs.readFileSync(file))
    for (const k in envConfig) {
      process.env[k] = envConfig[k]
    }
  }
  const project = process.env.VITE_APP_PROJECT;
  let target = `http://demo.cdgsafety.com:8000`;
  let common = {
    plugins: [createVuePlugin(), cesium()],
    base: project ? `/${project}/` : ``,
    build: {
      outDir: `./dist/${project ? project + '/' : ''}`,
      assetsDir: 'static'
    },
    resolve: {
      extensions: ['.vue','.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
      alias: {
        "@": path.resolve(__dirname, "./src")
      },
    },
    server: {
      open: true,
      proxy: {
        '/aaa':{
            target: ''
        }
      }
    }

  };
    //不同环境可以进行配置
  if (command === 'serve') {
    return common
  } else {
    return common
  }
}

3、启动项目

yarn serve2

3.1、启动后报错：找不到环境变量文件：我把当初的环境变量.env重命名为.env.local

3.2、页面打开后找不到页面，原因是vite.config.js默认是从vite.config.js当前目录下寻找index.html，，我记得这个好像是跟vite.config.js中的root相关，所以我就没有去配置root，因为当前的public目录我还是需要的，因为public目录下默认是不是编译的文件，把index.html从public移出到跟vite.config.js同级目录下

3.3、index.html移出后启动报错：

是因为当初里面存在一些变量例如：<%= BASE_URL %>，是无法识别的，把这写替换成“/”。例如：<script type="text/javascript" src="<%= BASE_URL %>external/jquery.min.js"></script>   ====》》》》<script type="text/javascript" src="/external/jquery.min.js"></script>。vite是自动帮你转变的，所以“/”是直接指向public目录下的。

重点：千万不要用“./”，这里需要“/”，不然进入页面刷新后会把vite.config.js里面的base也作为路径去加载相应文件，会出现404找不到。有些script中没有加type的需要加type="text/javascript"。例如：<script src="/external/jsencrypt.min.js"></script>   ===》》》<script type="text/javascript" src="/external/jsencrypt.min.js"></script>。不然会报错

最后一步修改index.html =====>>>>>添加   <script type="module" src="/src/main.js"></script>   需要在index.html中加入main.js，这里的type是module，不然会报错

3.4、sass not found  报错

安装sass

yarn add sass

3.5、/deep/  报错  无法识别

把/deep/ 全部替换成    ::v-deep

3.6、 代码检查中发现，有些人写的代码是试用v-for 但是没有添加key，说明vite对vue的检查真的是不错，之前webpack没检查出来的问题，检查不来了

添加key

3.7、代码中process报错

需要修改了,第一步把环境变量中的VUE_APP修改成VITE_APP；第二步把项目中使用的环境变量修改：process.env更换成import.meta.env（变量也是需要修改的，VUE_APP_ABC ===>>> VITE_APP_ABC）

代码运行起来了，起码登录界面出来了，现在是项目里面。（很多页面是懒加载的，所以有些问题还没有发现，建议先改成全量加载，这样可以更好的发现报错，以免有些问题是当打开一些页面的时候才报错）；

修改环境后需要重启一下。

4、修改项目中的报错

4.1、因为项目中使用了cesium的glb文件类型的3D模型，所以需要在import的时候，在后面加入：“?url”；例如：import blue_person from './cesium/xiaofang/blue_person.glb'；这是以前的，需要修改成：import blue_person from './cesium/xiaofang/blue_person.glb?url'。

因为之前webpack在使用的时候，会在webpack中添加配置如下：

config.module
          .rule("3d-model")
          .test(/\.(gltf|glb)$/)
          .use("url-loader")
          .loader("url-loader")
          .options({ limit: 10000 })
          .end();

所以我们把资源也用vite中url的方式告诉vite就行了。

4.2、./Build/Cesium/Widgets/widgets.css    报错

删除了就好了（目前我是删除了）感觉没啥问题，有可能vite-plugin-cesium帮我们做了

4.3、有些引入项目中的js，但是里面没有进行导出造成有些无法使用，所以就修改一下

4.4、require修改成相应的import，

vue中存在很多的require一些图片等静态文件地址，修改成先import，然后再替换

4.5、因为我使用了echarts的echarts-liquidfill.js这个js，之前直接引入就可以了，但是换成vite了，我就只能把echarts.min.js和echarts-liquidfill.js在index.html引入，把代码中的import全部删除

4.6、有的时候vite会报引入的vue文件错误，但是有时候不会，所以我把一些引入文件的但是后面加.vue的都加上了。例如：路由的页面报错找不到相应为文件，但是文件确实有点，后来在文件路径加上.vue后发现这个问题就解决了

 

 

这是我更换的一些经验，有问题可以一起交流