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

前面已经完成了项目的根本依靠和代码规范的建立，现在咱们需求建立一下构建环境，并完成对低版别谷歌浏览器的兼容。

  • Vite项目实践总结(一)：项目初始化
  • Vite项目实践总结(二)：根底依靠
  • Vite项目实践总结(三)：代码规范

打包指令

修正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浏览器兼容性问题

Vite项目实践总结(四)：打包构建
但是咱们需求兼容到谷歌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下，还好，生效了。