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打包的相关问题和见解,我会更新到这篇博客中去;

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值