プロジェクトで発生した問題と解決策

起動エラー

1. @babel/types@^7.10.1 エラーに一致するバージョンが見つかりません

    解决:cnpm install

2.モジュールのビルドに失敗しました (./mode_modules/sass-loader/dist/cjs.js から): TypeError: this.getOptions は関数ではありません

解决:sass-loader版本太高,卸载后下载低版本

3.sock.js

/node_modules/sockjs-client/dist/sockjs.js 

解决:注释掉:self.xhr.send(payload);

const utf8Encoder = new TextEncoder(); ^ReferenceError: TextEncoder が定義されていません

引入mangoose报错
解决:node版本太低,切换高版本的node

その他の問題

1. 外部リンクにジャンプしてページに戻っても更新されない

    解决:浏览器问题(谷歌不刷新且没有缓存,手机浏览器部分会刷新,部分会直接展示缓存,与手机的版本以及浏览器的设置有关),改变思路,换了个方案:打开新的窗口(window.open)

2. Vant は新しいコンポーネントを追加して、es パッケージにコンポーネントがないことを示します。

    解决:卸载重新安装

3. git clone プロジェクトが次のエラーを報告しました: OpenSSL SSL_read: Connection was reset, errno 10054

    解决:命令行输入 git config --global http.sslVerify "false"

4. el-upload がファイルをアップロードするとき、以前のファイルがまだアップロードされている場合、アップロードされていないファイルは、再度アップロードされるときに上書きされます。

    之前在调用success方法时,直接将返回结果res加入attachments里

    解决:改为在success里遍历fileList,通过判断response的值将fileList遍历塞给attachments.
success(res, file, fileList) {
    
    
      console.log(res, file, fileList);
      if (res.code == SUBMIT_NO) {
    
    
        this.$message.error(res.message);
        return;
      } else if (res.code == 401) {
    
    
         //登录超时
      }
      this.attachments.splice(0, this.attachments.length);
      // 附件中是否有上传中状态
      const upLoading = fileList.findIndex(item => {
    
    
        return item.status !== 'success';
      });
	  fileList.forEach(item => {
    
    
		if (item.response) {
    
    
		    this.attachments.push(item.response);
		} else {
    
    
		    this.attachments.push(item);
		}
	});
}

5. Vue 複数選択フォーム未定義のプロパティ '_selectionChanged' を読み取れません"

    解决:表格添加属性:lazy: true

6. CORS クロス ドメイン リクエスト エラー

    解决:html里添加<meta http-equiv="Access-Control-Allow-Origin" content="*" />

7. el-dialog + messagebox は、複数の箇条書きボックスを重ね合わせて、複数のマスク レイヤーを作成します。

    解决:之前的dialog使用的是 :modal-append-to-body="false" 改为 append-to-body

8. ページに入ると、el-form フォームの検証がトリガーされます

解决:1.将表单的触发方式由change改为blur,这种方式会导致选择器组件无法及时更新错误提示
	  2.在mounted里执行clearValitdate(),清除表单校验。
	  this.$nextTick(() => {
	      this.$refs['form'].clearValidate();
	    });

9. border-image と border-radius は互換性がありません。border-radius は無効です

解决:将border-image替换为background-image,内部再套一个div,设置border-radius,内容放在这个div里面。

10. vue3 の el-form フォームが入力できない

解决:el-form中model与ref同名了,改掉即可

11. el-upload アップロード アバター エラー TypeError: xhr.upload.addEventListener is not a function

原因: mockjs拦截了XHR
解决:在node_modules中找到mockjs/dist/mockjs 8308行 mockjs/src/mock/xhr/xhr.js 216行 下添加这段代码 MockXMLHttpRequest.prototype.upload = xhr.upload;然后重启项目

11. toFixed rounding problem (IEでは正常、Chromeでは丸め)

原因:不同浏览器的原生方法不一致
解决:引入mathjs包,使用mathjs.format(value, precision)

12. $route 無効を見る

原因:路由跳转是会销毁当前父组件的,对于新的组件来说,初始化的$route是不会判断其变化的
解决:加上immediate: true, 即立即执行

13. IOS 時間の変換に失敗しました: new Date(“2022-08-04 5:00:00”) は無効な日付を返します

原因:IOS只能解析“/”分割的日期
解决:new Date("2022-08-04 5:00:00".replace(/-/g, '/'))

14.金額計算精度低下問題

解决:借助big.js/decimal.js解决

15. element-ui はオンデマンドで国際化をロードします

解决:
按需加载:babel.config.js中添加[
  'component',
  {
    libraryName: 'element-ui',
    styleLibraryName: 'theme-chalk'
  }
]
创建element-ui.js手动导入所有需要用的组件
main.js中添加
import '@/plugins/element-ui';
//国际化
import eleLocale from 'element-ui/lib/locale';
eleLocale.i18n((key, value) => i18n.t(key, value));

16. getBoundingClientRect()で取得したデータが全て0

原因:在使用该函数获取元素在文档中的位置信息时,需保证元素已经在DOM上渲染才能使用
解决:在nextTick中调用

17. ブラウザの警告: [DOM] パスワード フィールドがフォームに含まれていません

原因:Make sure that each authentication process (registration, login or change password) is grouped together in a single <form> element. Don’t combine multiple processes (like registration and login), or skip the <form> element.
解决:密码输入框套在<form>标签内

おすすめ

転載: blog.csdn.net/qq_41028148/article/details/123229117