vue3+vite项目打包注意事项和相关问题，babel使用，ie,es5兼容

vue3+vite项目打包后，可能会出现很多问题，这里我先写一部分，后面慢慢补充

首先是配置问题，在vite.config.js中，配置生产可以又以下几种常见的

 // 生产环境配置
  build: {
    target: 'es2015',
    outDir: 'clientSide', // 指定输出路径
    assetsDir: 'static', // 指定生成静态资源的存放路径
    sourcemap: false, // 输出.map文件
    terserOptions: {
     compress: {
       drop_console: true, // 生产环境移除console
       drop_debugger: true // 生产环境移除debugger
     }
    }
  },

  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'] //这里是做兼容IE的，后面解释
    }),
    vue()
  ],

如果你需要兼容IE，那么你需要下载一个依赖："@vitejs/plugin-legacy": "^4.1.1",下载之后需要在vite.config.js中引入：

import legacy from '@vitejs/plugin-legacy';

然后加入我上面写的plugins中的内容即可

除此之外，如果打包发生了报错：Error: terser not found. Since Vite v3, terser has become an optional dependency. You need to install it. at loadTerserPath

那么，这是因为在项目中，vite需要使用terser进行代码压缩，但是terser并没有安装，需要安装

npm install terser -D

这样就可以继续打包了

还有就是本地图片，本地图片最好全部使用路径别名，不然打包之后可能展示不出来，这是详细一点的相关链接：Expected a JavaScript module script but the server responded with a MIME type of “text/html“.Strict_failed to load module script: expected a javascrip-CSDN博客

Babel（这里加入了cli的情况，上面的全是vite）

在 Vue 项目中使用 Babel 通常是为了将你的 JavaScript 代码转换成向下兼容的版本，以确保它在不同浏览器和环境中都能够正常运行。在 Vue 项目中使用 Babel 通常需要以下步骤

1.安装 Babel 核心依赖：

npm install --save-dev @babel/core babel-loader

安装预设（Presets）和插件（Plugins）：Babel 预设包含了一组转换规则，而插件则可以用来进行特定的转换。在项目中选择合适的预设和插件，常见的是 @babel/preset-en，用于将最新的 JavaScript 特性转换成向下兼容的代码。

2.配置Babel ：

在项目根目录下创建一个 .babelrc 文件（或者在 package.json 中的 babel 字段里进行配置）。

在 .babelrc 文件中指定所需的预设和插件：

{
  "presets": ["@babel/preset-env"],
  "plugins": []
}

3.配置CLI（如果使用）：

如果你是通过 Vue CLI 创建的项目，在 vue.config.js 文件中配置 Babel 相关的选项

module.exports = {
  // ...其他配置
  chainWebpack: config => {
    config.module
      .rule('js')
      .use('babel-loader')
      .loader('babel-loader')
      .tap(options => {
        // 修改/添加你的 Babel 配置
        return options;
      });
  }
};

4.使用：

在配置好 Babel 之后，它会自动处理你的 JavaScript 文件。你可以编写使用了最新 JavaScript 特性的代码，Babel 会将其转换成向下兼容的版本。

确保在进行上述配置时，你了解你的项目需要支持的浏览器和目标环境，以便选择合适的 Babel 预设和插件。同时，不要忘记在开发中测试你的代码，确保转换后的代码能够在目标环境中正常运行。

以上是我的一些个人记录和见解，后面如果有更多关于vue打包的相关问题和见解，我会更新到这篇博客中去；

各位如果看到这篇文章，觉得有什么写的不对的或者需要补充的，麻烦评论或者私信一下，大家一起学习进步哈