Vue3 + Vite +TS 项目问题总结

2022-11-26  本文已影响0人  伊路顺峰

最近做的几个Vue项目基本都收尾了，总结一下在项目中遇到的问题，希望能帮助遇到同样问题的小伙伴
项目情况：我做的项目都是Vue3.2（setup语法） + Vite + TS ，一个H5 项目，一个PC前台，还有PC后台管理项目，后管项目主要是业务和逻辑，遇到的技术问题不多。

1、H5项目

1.1 自适应屏幕宽度

H5项目UI用的是vant-ui，首先说一下H5项目的屏幕适配问题，可以借助postcss插件，安装 postcss-px-to-viewport依赖, npm install postcss-px-to-viewport -D 然后在vite.config.js中配置

我的UI设计稿宽度是375，所以viewportWidth 设置为375，打包时会将设计稿中的宽度自动转为rem，然后在项目中所有的宽度和高度最好都在style中显示设置，尽量不要用js 动态控制，也不要使用vantUI 控件自带的属性设置宽度，否则响应式会失效。

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', // 要转化的单位
          viewportWidth: 375, // UI设计稿的宽度
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          // exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配，最好不要排除node_modules 文件，排除后在项目中会发现字体不能跟随页面放大
          exclude: [],
          landscape: false // 是否处理横屏情况
        })
      ]
    }
  }
})

1.2、手机端调试问题

有时候我们用PC端模拟器开发完成后，在手机端有些效果达不到我们的要求，这时候一个比较头疼的问题就是如何在真机上打log，或者想看一下报错信息，这时候我们可以使用手机端调试工具：

-https://github.com/liriliri/eruda 这个是我目前在使用的，引用方式也很简单，直接放在我们的index.html 文件中

<!DOCTYPE html>
<html lang="zh">
<head>
  <-- head 中其他内容省略 -->
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
<-- 在这里加入以下几行代码即可 上线前别忘记把这几行代码注释 或者删掉 --- >
  <script src="//cdn.bootcss.com/eruda/1.3.0/eruda.min.js"></script>
  <script>
    eruda.init();
  </script>
</body>
</html>

加入上面的调试工具后，在手机上我们就可以看到这个界面了，报错信息、打印日志、网络请求就很容易看到了


image.png

还有下面这两个调试工具，用法大同小异

1.3、新建、或者引入一些文件（图片）后找不到

有时候我们的项目会报一些莫名其妙的错误，尤其是在我们新建一些文件或者引入一些新的文件时，这时候建议control + c 停掉项目，重新 npm run dev 一下

1.4、在setup 中定义组件的名称

在使用keep-alive的时候需要传入组件的名称，但是vue3.2 setup中无法定义组件名称，方法一，可以在一个组件中写两个<script> 其中一个使用setup ，另一个不用setup,在这个中定义组件的名称；方法二，使用插件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、兼容性问题

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

plugins: [
    vue(),
    //解决低版本浏览器兼容性问题
    legacy({
      targets: ["defaults", "not IE 11"],
    })
]

1.7、其他小问题

在ts中定义变量时，将接口中的属性变为可选值，使用 Partial
假设我们当前定义了一个`User' 接口，在定义变量 user 的时候，编译器提示我们必须要给user 设置所有属性：

image.png 
interface User{
    userId: string;
    name: string;
    age: number;
    birthday: string;
}
let user: User = {};

这时候我们可以使用Partial包裹一下，就不会报错了

let user: Partial<User> = {};

<meta name=renderer  content=webkit>

if (config.method.toLowerCase() === "delete") {
        config.data = config.params;
    config.params = undefined;
}
上一篇 下一篇

猜你喜欢

热点阅读