Vue3 + Vite +TS 項(xiàng)目問題總結(jié)

最近做的幾個(gè)Vue項(xiàng)目基本都收尾了擒权，總結(jié)一下在項(xiàng)目中遇到的問題，希望能幫助遇到同樣問題的小伙伴
項(xiàng)目情況：我做的項(xiàng)目都是Vue3.2（setup語法） + Vite + TS ，一個(gè)H5 項(xiàng)目，一個(gè)PC前臺(tái)已烤，還有PC后臺(tái)管理項(xiàng)目，后管項(xiàng)目主要是業(yè)務(wù)和邏輯停忿，遇到的技術(shù)問題不多。

1蚊伞、H5項(xiàng)目

1.1 自適應(yīng)屏幕寬度

H5項(xiàng)目UI用的是vant-ui席赂，首先說一下H5項(xiàng)目的屏幕適配問題，可以借助postcss插件厚柳，安裝 postcss-px-to-viewport依賴, npm install postcss-px-to-viewport -D 然后在vite.config.js中配置

我的UI設(shè)計(jì)稿寬度是375氧枣，所以viewportWidth 設(shè)置為375，打包時(shí)會(huì)將設(shè)計(jì)稿中的寬度自動(dòng)轉(zhuǎn)為rem别垮，然后在項(xiàng)目中所有的寬度和高度最好都在style中顯示設(shè)置，盡量不要用js 動(dòng)態(tài)控制扎谎，也不要使用vantUI 控件自帶的屬性設(shè)置寬度碳想，否則響應(yīng)式會(huì)失效烧董。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import postcsspxtoviewport from 'postcss-px-to-viewport'

export default defineConfig({
  plugins: [
    vue()
  ],
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'px', // 要轉(zhuǎn)化的單位
          viewportWidth: 375, // UI設(shè)計(jì)稿的寬度
          unitPrecision: 6, // 轉(zhuǎn)換后的精度，即小數(shù)點(diǎn)位數(shù)
          propList: ['*'], // 指定轉(zhuǎn)換的css屬性的單位胧奔，*代表全部css屬性的單位都進(jìn)行轉(zhuǎn)換
          viewportUnit: 'vw', // 指定需要轉(zhuǎn)換成的視窗單位逊移，默認(rèn)vw
          fontViewportUnit: 'vw', // 指定字體需要轉(zhuǎn)換成的視窗單位，默認(rèn)vw
          selectorBlackList: ['ignore-'], // 指定不轉(zhuǎn)換為視窗單位的類名龙填，
          minPixelValue: 1, // 默認(rèn)值1胳泉，小于或等于1px則不進(jìn)行轉(zhuǎn)換
          mediaQuery: true, // 是否在媒體查詢的css代碼中也進(jìn)行轉(zhuǎn)換，默認(rèn)false
          replace: true, // 是否轉(zhuǎn)換后直接更換屬性值
          // exclude: [/node_modules/], // 設(shè)置忽略文件岩遗，用正則做目錄名匹配扇商，最好不要排除node_modules 文件，排除后在項(xiàng)目中會(huì)發(fā)現(xiàn)字體不能跟隨頁面放大
          exclude: [],
          landscape: false // 是否處理橫屏情況
        })
      ]
    }
  }
})

1.2宿礁、手機(jī)端調(diào)試問題

有時(shí)候我們用PC端模擬器開發(fā)完成后案铺，在手機(jī)端有些效果達(dá)不到我們的要求，這時(shí)候一個(gè)比較頭疼的問題就是如何在真機(jī)上打log梆靖，或者想看一下報(bào)錯(cuò)信息控汉，這時(shí)候我們可以使用手機(jī)端調(diào)試工具：

-https://github.com/liriliri/eruda 這個(gè)是我目前在使用的，引用方式也很簡單返吻，直接放在我們的index.html 文件中

<!DOCTYPE html>
<html lang="zh">
<head>
  <-- head 中其他內(nèi)容省略 -->
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
<-- 在這里加入以下幾行代碼即可 上線前別忘記把這幾行代碼注釋 或者刪掉 --- >
  <script src="http://cdn.bootcss.com/eruda/1.3.0/eruda.min.js"></script>
  <script>
    eruda.init();
  </script>
</body>
</html>

加入上面的調(diào)試工具后姑子，在手機(jī)上我們就可以看到這個(gè)界面了，報(bào)錯(cuò)信息测僵、打印日志壁酬、網(wǎng)絡(luò)請(qǐng)求就很容易看到了

image.png

還有下面這兩個(gè)調(diào)試工具，用法大同小異

https://github.com/liriliri/chii
https://github.com/Tencent/vConsole

1.3恨课、新建舆乔、或者引入一些文件（圖片）后找不到

有時(shí)候我們的項(xiàng)目會(huì)報(bào)一些莫名其妙的錯(cuò)誤，尤其是在我們新建一些文件或者引入一些新的文件時(shí)剂公，這時(shí)候建議control + c 停掉項(xiàng)目希俩，重新 npm run dev 一下

1.4、在setup 中定義組件的名稱

在使用keep-alive的時(shí)候需要傳入組件的名稱纲辽，但是vue3.2 setup中無法定義組件名稱颜武，方法一，可以在一個(gè)組件中寫兩個(gè)<script> 其中一個(gè)使用setup 拖吼，另一個(gè)不用setup,在這個(gè)中定義組件的名稱鳞上；方法二，使用插件npm i vite-plugin-vue-setup-extend -D, 然后在vite.config.ts中配置：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
//插件：可以在setup 語法糖情況下 定義組件名稱
import VueSetupExtend from "vite-plugin-vue-setup-extend";
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend()
  ]
});

在文件中就可以給組件定義名稱了：

<script lang="ts" setup name="index">
</scirpt>

1.5吊档、引用本地圖片

vue3中引入圖片的方式跟Vue2不同篙议，在vue3中，我們可以使用以下方式：

<van-image   :src="getImageSrc('a.png')"  ></van-image>

const getImageSrc = (name: string) => {
  return new URL(`../../assets/${name}`, import.meta.url).href;
};

1.6、兼容性問題

iOS設(shè)備鬼贱，使用Date.parse('str') 進(jìn)行日期轉(zhuǎn)換時(shí)移怯，str字符串中不能帶‘-’ 中劃線，否則會(huì)出現(xiàn) invalid date 这难，日期轉(zhuǎn)換之前先將str 中的‘-’ 轉(zhuǎn)為 ‘/’ 舟误，再進(jìn)行格式化操作
replaceAll 在某些瀏覽器（獵豹、360）不兼容姻乓，推薦使用正則 ,全局匹配

str = str.replace( /myDemo/g,  "demo")

h5項(xiàng)目在某些機(jī)型白屏問題嵌溢，安裝插件： npm install @vitejs/plugin-legacy,然后在vite.config.ts 添加配置

plugins: [
    vue(),
    //解決低版本瀏覽器兼容性問題
    legacy({
      targets: ["defaults", "not IE 11"],
    })
]

1.7、其他小問題

在ts中定義變量時(shí)蹋岩，將接口中的屬性變?yōu)榭蛇x值赖草，使用 Partial
假設(shè)我們當(dāng)前定義了一個(gè)`User' 接口，在定義變量 user 的時(shí)候星澳，編譯器提示我們必須要給user 設(shè)置所有屬性：