Vite项目实践总结(四)：打包构建

柜子动了
1,505 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

前面已经完成了项目的基本依赖和代码规范的搭建，现在我们需要搭建一下构建环境，并完成对低版本谷歌浏览器的兼容。

打包命令

修改package.json中的打包命令来区分开发环境和生产环境

{
  "script": {
    //...
    "build:dev": "vue-tsc --noEmit && vite build --mode dev",
    "build:pro": "vue-tsc --noEmit && vite build --mode pro"
  }
}

在项目中就可以通过import.meta.env获取到对应的环境

问题1、打包后，放置在assets文件夹中的图片引用路径出错，未能正确指向

/* 源代码 */
.xxxx {
  background: url('@/assets/bg.jpg');
}

打包后发现对应的css中路径未能正确指向

  • 尝试1：可能是路径别名问题-》使用绝对路径->未解决
  • 尝试2：将图片放到public文件夹，直接指向，还是不能正确指向

但是从第二次尝试中发现问题所在，因为vite默认的资源目录就是public文件夹，所以在将图片放到public下后直接/bg.jpg即可，但是打包后的路径却变成了./bg.jpg. 可以知道是我们vite配置的问题，当时配置了base(开发或生产环境服务的公共基础路径),但是设置为了base: './'所以出错了，然后将此配置删除，将之前的代码和图片路径恢复成最开始的情况，打包ok.😂

问题二、打包后的不能兼容Chrome48版本

解决方法：下载vite插件yarn add @vitejs/plugin-legacy -D;通过该插件来进行兼容性处理

//vite.config.ts
import legacy from '@vitejs/plugin-legacy';

export default defineConfig({
  plugins: [
    //...
    legacy({
      targets: ['> 1%',' Chrome >= 48'], //需要兼容的目标列表，可以设置多个
    })
  ]
})

ok

问题四、Element-Plus浏览器兼容性问题

elementplus1.png 但是我们需要兼容到谷歌48版本

一开始没有发现该问题(使用el-input、el-aside等组件没有发现异常)。直到使用了表格、下拉框、级联等组件时，打包发布后发现控制台报错ResizeObserver is undefined,通过查看官网才得知，ResizeObserver是有兼容性要求的Resize Observer,可以得知Resize Observer在谷歌中最低需要64版本。

所以我们需要通过polyfill来帮助我们支持更低版本的要求。

什么是polyfill

MDN上的描述：Polyfill 是一块代码（通常是 Web 上的 JavaScript），用来为旧浏览器提供它没有原生支持的较新的功能。

解决

  • 安装resize-observer-polyfill
npm install resize-observer-polyfill --save-dev
  • 在main.ts中引入
import ResizeObserver from 'resize-observer-polyfill';
window.ResizeObserver = ResizeObserver;

之前试过直接在main.ts中import 'resize-observer-polyfill';，发现还是没有解决问题，还是报undefine, 所以才将它挂载到window下，还好，生效了。

avatar
文章
阅读
粉丝