關於日常開發中遇到的問題的不定期更新

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