关于日常开发中遇到的问题的不定期更新

W3C & vue+element

1、给输入框绑定回车事件，第一次回车总是刷新当前页，没有跳转至目标页，第二次之后跳转正常

问题原因：
W3C规定，当一个form表单里只有一个输入框时，在该输入框中按下回车应提交表单。
表现在vue+element中就是，我第一次回车的时候，url被替换并刷新了，#前面多了个?，后面再回车就是好的。规律就是#前面有?，回车就是正常的，没有?，回车就会刷新当前页，/#/变成/?#/

解决方案：
阻止表单的这个默认行为，给<el-form>标签加上@submit.native.prevent

webpack

1、after seal[hardsource:5247ef29] Could not freeze ./src/router/index.js: Cannot read property 'hash' of undefined

解决方案：可能是webpage的HardSourceWebpackPlugin插件，生成cache时引发的错误，删除node_modules/.cache后再npm start

vue-cli3+webpack

1、配置env文件，自定义变量无法在main.js中取到

解决方案：自定义变量名需要以VUE_APP_开头，否则只能在vue.config.js里取到，main.js等开发文件中取不到。

vue

1、vue_相同组件，不同路径跳转组件不重新渲染的解决方法

问题描述：组件没有重新渲染，data中声明的属性没有重新初始化

解决方案：参考vue_相同组件，不同url跳转不重新渲染的解决方法

<router-view v-if="isRouterActive" :key="key"></router-view>

watch: {
    $route(to, from) {
        this.isRouterActive = false;
        this.key = Math.random() * 1000;
        this.$nextTick(() => (this.isRouterActive = true));
    }
}

2、页面报错An error occurred while loading the component

问题描述：
本地开发页面部分组件渲染失败，控制台报错。

问题原因：
可能是本地serve的问题，如serve的反向代理出现问题。

解决方案：重启本地开发serve。

vue+typescript

1、main.ts 中，提示import App from './App.vue'处，找不到 App.vue 这个模块

解决方案：将原shims-vue.d.ts文件分成两个文件

// shims-vue.d.ts
import VueRouter, { Route } from "vue-router";
declare module "vue/types/vue" {
  interface Vue {
    $router: VueRouter; // 这表示this下有这个东西
    $route: Route;
    $Message: any; // 不知道类型就定为 any 吧（偷懒）
  }
}

// vue.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

typescript

1、object[key]的问题

let str = '';
type FooType = keyof typeof params;

Object.keys(params).forEach(item => {
    if (Object.hasOwnProperty.call(params, item)) {
        str += item + "=" + params[item as FooType] + "&";
    }
})

echart

1、点击echart图形跳转页面重复执行click

原因：echart创建的时候，需要清除缓存，且click事件也需要注销之后再重新声明定义

解决方案：

chart.clear();//清除缓存
chart.setOption(option);//设置echart
chart.off('click');//注销click事件
chart.on("click", function (e) {//重新声明定义click
    console.log(e);
});

esLint

1、Do not access Object.prototype method 'hasOwnProperty' from target object

原因：新版本的ESLint使用了禁止直接调用 Object.prototypes 的内置属性开关，就是ESLint 配置文件中的 "extends": "eslint:recommended" 属性启用了此规则。

解决方案：

// obj.hasOwnProperty("bar");
Object.prototype.hasOwnProperty.call(obj, "bar");

Echart

1、各项数据值全都为0时，饼图计算百分占比时，将100%均分给了各项。

原因：值为0和undefined是两种处理表现

解决方案：可以判断值为0时，传入undefined；值全部为0时，做如下渲染：

myChart.setOption({
    title: {
        text: "暂无数据",
        top: "4px",
        textStyle: {
            color: "#999999",
            fontSize: 16,
            lineHeight: 100,
            fontWeight: 400
        }
    }
});

axios

1、异步给request headers添加/修改header

// 法1：
// 在需要添加/修改做如下操作
this.$axios.defaults.headers.common['customHeader'] = "new-header-content";

// 法2：
$axios.interceptors.request.use(function (config) {
    // 在发送请求之前
    // 给请求headers添加新header
    config.headers["customHeader"] = "new-header-content";
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

npm报错

1、npm ERR! code EINVALIDPACKAGENAME

报错如下：

npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name "_mocker-api@2.1.0@mocker-api": name cannot start
with an underscore; name can only contain URL-friendly characters

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xujj101\AppData\Roaming\npm-cache\_logs\2021-09-02T01_11_0
1_734Z-debug.log

解决方案：

1. 安装cnpm：随便一个路径下打开cmd（最后都会安装到C盘特定路径下）
2. cmd中执行npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 确认cnpm是否安装成功：查看cnpm版本号 cnpm -v
4. 使用cnpm打包：cnpm install
5. 生成需要的前端包：npm run build

本文链接：https://www.cnblogs.com/xsilence/p/13451087.html