常见问题的解决方案

2/4/2021

# 常见问题的解决方案

# 自动忽略 console.log

main.js 引入这个函数并执行一次,就可以实现忽略 console.log 语句的效果。

export function rewriteLog() {
    console.log = (function(log) {
        return process.env.NODE_ENV == "development" ? log : function() {};
    })(console.log);
}

# vue3.0项目导入element-plus样式文件报错

用了vite脚手架创建了项目,导入element时启动项目一直报错css样式导入失败,将 main.js 里的 import 'element-plus/lib/theme-chalk/index.css' 注释掉解决报错,但没了样式

# 解决方法

https://blog.csdn.net/qq_41769047/article/details/111180961

强迫症犯了,折腾了一下午最后发现是项目最外层的中文文件名字造成的,是不是很离谱,简直是老王吃花椒,麻了隔壁,大家将中文文件名改为英文就好了

# vue安装第三方插件安装失效

node_modules删除在重新安装

# 常见移动web布局适配方法

.rem文件的导入问题

我们在做手机端时,适配是必须要处理的一个问题。例如,我们处理适配的方案就是通过写一个rem.js,原理很简单,就是根据网页尺寸计算html的font-size大小,基本上小伙伴们都知道,这里直接附上代码,不多做介绍。

(function(c, d) {
  var e = document.documentElement || document.body,
    a = "orientationchange" in window ? "orientationchange" : "resize",
    b = function() {
      var f = e.clientWidth;
      e.style.fontSize = f >= 750 ? "100px" : 100 * (f / 750) + "px";
    };
  b();
  c.addEventListener(a, b, false);
})(window);

这里说下怎么引入的问题,很简单。在main.js中,直接import './config/rem'导入即可。import的路径根据你的文件路径去填写

# params传参丢失问题

query传参方式刷新参数不会丢失,params传参会丢失

解决方法

如果使用params传值的话,在刷新后不让参数丢失 的话,就在路由配置中这样写,携带几个参数就要写几个参数`

标签跳转
<router-link :to="{name: 'Detail', params: { id: 1 }}">前往Detail页面</router-link>

编程式跳转 vue2.x
Click: function () {
   this.$router.push({ name: "Text", params: { id: 1, token: "asnkdas" } });
},

编程式跳转 vue3.x
编程跳转方法一
router.push("/");//不带参数
router.replace("/");//用replace没有历史记录
router.push({ //路由跳转带参数
 path:"/",
 params:{
   id:"2"
  }
})

编程跳转方法二
ctx.$router.push("/");//路由跳转不带参数
ctx.$router.replace("/");//用replace没有历史记录
ctx.$router.push({ //路由跳转带参数
path: "/",
params: {
  id: "2",
 },
});
路由配置
{
		path: "/text/:id/:token/:name",
		name: 'Text',
		component: () =>
			import ("../view/text.vue"),
},