最近做的几个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>
加入上面的调试工具后,在手机上我们就可以看到这个界面了,报错信息、打印日志、网络请求就很容易看到了
还有下面这两个调试工具,用法大同小异
- https://github.com/liriliri/chii
- https://github.com/Tencent/vConsole
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、兼容性问题
- iOS设备,使用Date.parse('str') 进行日期转换时,str字符串中不能带‘-’ 中划线,否则会出现
invalid date
,日期转换之前先将str 中的‘-’ 转为 ‘/’ ,再进行格式化操作 - replaceAll 在某些浏览器(猎豹、360)不兼容,推荐使用正则 ,全局匹配
str = str.replace( /myDemo/g, "demo")
- h5项目在某些机型白屏问题 ,安装插件:
npm install @vitejs/plugin-legacy
,然后在vite.config.ts
添加配置
plugins: [
vue(),
//解决低版本浏览器兼容性问题
legacy({
targets: ["defaults", "not IE 11"],
})
]
1.7、其他小问题
在ts中定义变量时,将接口中的属性变为可选值,使用 Partial
假设我们当前定义了一个`User' 接口,在定义变量 user 的时候,编译器提示我们必须要给user 设置所有属性:
interface User{
userId: string;
name: string;
age: number;
birthday: string;
}
let user: User = {};
这时候我们可以使用Partial
包裹一下,就不会报错了
let user: Partial<User> = {};
- 在360兼容模式下 打开页面自动切换到极速模式,在inde.html 中添加
<meta name=renderer content=webkit>
-
json 对象自动转 ts 对象,安装vscode 插件: JSON To TS,再也不用我们手写接口了
使用axios 调用delete 方法时,需要注意,默认是把参数放在query 中,也就是把参数拼在了url 的后面,如果后台要求把参数放在body中,这时候需要单独设置
config.data = config.params
,并且将config.params = undefined
if (config.method.toLowerCase() === "delete") {
config.data = config.params;
config.params = undefined;
}
- 在某些设备上字体显示错误,一般是谷歌浏览器,这个问题是浏览器开启了自动翻译网页,把这个关闭就可以