微信 Facebook 授权失败

Question

老實說，微信技術上就是辦不到這件事，因此除非臉書違反使用者隱私條款直接跟微信串通掛鉤，否則這件事是絕對不可能發生的；這邊可能有人要說：「臉書本來就無視使用者隱私！」之類的，我同意，但這跟未經允許直接授權其他軟體綁定是兩回事…我不相信臉書現在還敢這樣搞。

目錄 Show

結論：微信到底有沒有偷偷綁定臉書？
facebook授權失敗wechat 參考資料
Delete CR错误
vue script和style标签的缩进问题
arrowParens(箭头函数圆括号)
postcss.config.js
配置释义
样式定制/覆盖
List组件bug
太长不看版
网页授权流程
坑一: 登录和重定向(回调页面redirect_uri)
坑二: 权限验证配置(wx.config)
invalid signature
the permission value is offline verifying
坑三: 获取本地图片(wx.getLocalImgData)无法显示问题
处理微信相关逻辑的参考代码
获取程序的运行平台的方法
根据运行平台处理签名url的方法
权限验证配置方法(wx.config)
选择图片(chooseImage)和获取本地图片(getLocalImgData)的方法
人脸认证方法(选择图片之后将图片转为base64)
全局导航守卫(afterEach)处理微信权限验证配置(wx.config)设置微信分享

就算臉書真的敢偷偷掛鉤好了，這種擺明了會鬧超大的事絕對也是偷偷摸摸，不會還放一個按鈕讓你停用的…

最有可能的原因，是你當初在設定微信帳號時，就是用 Facebook 登入而自己忘了！微信跟 LINE 不同，一但註冊好帳號後之後很大機率再也不用輸入帳號密碼了，所以很有可能在幾年前用 Facebook 註冊了 WeChat 帳號，然後忘記當初是怎麼註冊的。

因為很多人可能懶得用手機註冊，順手就點了用臉書帳號登入，於是就這樣綁定了。

另一種可能，是你要用 WeChat 分享某篇文章到臉書頁面，點文章裡的分享鈕，這時就會跳出說「你還沒有綁定 Facebook 帳號，是否要現在進行綁定？」很多人大概也是在這個步驟就順手按個幾下，就完成綁定了。

結論：微信到底有沒有偷偷綁定臉書？

答案是，有 99.9999% 的機率沒有，如果你的微信顯示「已綁定」（不是已啟用喔），那麼有很高的機率是你無意間自己完成的綁定，不是微信的問題，請在按下任何登入鈕之前都稍微留意。

原因，就是微信在技術上無法繞過 Facebook 的授權強行綁定，甚至連偽造一個登入頁面也不行，所以肯定是你自己不知道什麼時候綁定的。

剩下的 0.0001% 呢？那就是萬惡臉書直接跟微信掛鉤，偷偷授權 WeChat 綁定使用者帳號，但如果是這樣，現在臉書應該又要再多賠個幾十億了吧…而且就算要做這種勾當，肯定也不會還放一個取消授權的按鈕免費送大家把柄…

wechat facebook授權失敗 - 軟體兄弟,wechat facebook授權失敗,facebook授權失敗wechat,【微信自動連結臉書】內有解法！Facebook個人隱私被存取... ,2019年9月6日— 【FB惡意授權】最新病毒流竄！

偵測到阻擋廣告工具，為了取得本站最佳瀏覽與支持本站廣告業務，請將同意本站廣告的顯示，譬如解除 AdBlock 的設定，解除後文章將可以繼續瀏覽。

網站搜尋結果若不如預期，請使用內建 Google 搜尋：

Facebook 個資風波越演越烈，其實並非只有 Facebook 搜集個人隱私，我們在臉書上做的各種心理測驗，也把自己個資賣掉了，數據分析公司「CubeYou」透過各種線上測驗 App 收集了大量 Facebook 用戶數據資料，這些...

【抽特斯拉】看漫畫學知識！尖端科學漫畫系列套組

facebook授權失敗wechat 參考資料

wechat facebook授權失敗 - 軟體兄弟

wechat facebook授權失敗,facebook授權失敗wechat,【微信自動連結臉書】內有解法！Facebook個人隱私被存取... ,2019年9月6日— 【FB惡意授權】最新病毒流竄！

「Facebook授權失敗」-痞客幫文章無法連結臉書貼文

2018年6月25日 — 「Facebook授權失敗」-痞客幫文章無法連結臉書貼文平時工作對於文件處理系統不陌生，但，要開始學習網路上的操作方式，將資料上傳.

【微信自動連結臉書】內有解法！Facebook個人隱私被存取 ...

2019年9月6日 — 最近大家都很擔心微信（WeChat）自動連接上臉書（Facebook）的事情，雖然這似乎是一場誤會，但為了以防萬一，小編還是要來教教大家如何將微信與臉書 ...

微信WeChat自動綁定臉書，快刪除？事情的真相沒那麼恐怖...

2019年9月2日 — 答案是不可能的，綁定臉書的機制大家都很熟了，一定是要先跳轉到Facebook 的頁面，詢問你是否要授權某某軟體使用你的Facebook 帳號登入，並且由你親自按下 ...

微信绑定Facebook帐号的方法 - 腾讯客服

微信绑定Facebook帐号的方法. 请根据以下步骤操作：语言设置请在手机上点击【设置】->【通用】->【语言 ...

wechat facebook授權失敗-在PTTIG網紅社群上服務品牌流行 ...

wechat facebook授權失敗-在PTT/IG/網紅社群上服務品牌流行穿搭-2022-08(持續更新). 首頁 · ice paper · ice · t stock price · AT&T · wechat fb · WeChat Facebook ...

facebook授權失敗wechat,【微信自動連結臉書】內有解法！Facebook個人隱私被存取... ,2019年9月6日— 【FB惡意授權】最新病毒流竄！網路專家：奇怪的連結 ... ,由於手機王以電子郵件作為會員帳號，因此選擇以facebook 登入成為會員時，需先 ... 情況二：先前已經登入過且授權失敗，也未於臉書帳號提供電子郵件資料，或 ... ,2018年6月25日 — 我要將處理寫下來，也是預防第三次我在遇到，到時候就會處理了！「Facebook授權失敗」就是FB過隔一陣子就會對痞客邦授權過期， ... ,2019年9月6日 — 最近大家都很擔心微信（WeChat）自動連接上臉書（Facebook）的事情，雖然這似乎是 ... 羅技3C、可愛授權小物福袋夯！微信自動存取臉書？大家近期是否有聽到「WeChat 會自動連結FB，存取你的個人隱私」這個傳言呢？ , ,2019年10月14日 — 答案是不大概的，綁定臉書的機制各人都很熟了，肯定是要先跳轉到Facebook 的頁面，詢問你是否要授權某某軟體使用你的Facebook 帳號登入， ... ,2019年9月2日 — 也就是說，就算微信無良到想要偷偷綁定你的臉書，在技術上也是辦不到的，一定要跳轉到Facebook 自己的頁面，並由你親自按下授權鈕才可以 ... ,在微信页面轻触右上角【+】->【添加朋友】->搜索选择【facebookapp】->【启用该功能】，可添加facebook功能。绑定Facebook. 进入微信中的【我】->【设置】- ...

8月底的时候接到了一个微信公众号网页开发的任务, 在此之前我从没开发过微信公众号网页的项目, 心想这回又能学到新东西了, 然后又是移动端项目, 可以放心地使用框架和

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

6的语法提升开发体验了, 因为平时的项目很多都是

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

7, 并且需要兼容低版本

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

8浏览器.

接下来就是技术选型, 结合我擅长的

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

9考虑, 移动端UI组件首先我就想到了ant design mobile, 然后看看微信网页开发#网页授权的文档, 就可以上手开发了, 紧接着就是兵来将挡水来土掩了

但想到我对

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

9已经相对比较熟悉, 而且公司前端开发团队里的其他人用的都是

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

1, 如果我也掌握了

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

1, 那么后续如果有一些紧急的项目, 比如之前有其他小伙伴做过的项目, 那么我拿到代码之后就能快速了解对方的代码逻辑, 从而能够借鉴已有的代码, 达到敏捷开发的目的, 既能学习一项新的框架, 同时还能有助于后续的开发, 而这仅仅只是多花点时间就能获得的, 何乐而不为呢

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

1目前最新的版本是

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

4, 之前用过一下

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

4, 但并没有用

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

4中的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

7

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

8, 而是用的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

9方法, 然后整个文件的写法感觉就有些不伦不类, 看着像

const foo = a => {};
复制代码

0的

const foo = a => {};
复制代码

1的写法, 又像

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

4的

const foo = a => {};
复制代码

3的写法, 当然了, 也可能是我的姿势不对, 而这次我打算直接使用

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

4的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

7

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

8以及

const foo = a => {};
复制代码

3,

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

4的

const foo = a => {};
复制代码

3看起来和

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

9的

const foo = (a, b) => {};
复制代码

1的写法非常相似, 上手应该没有太大的难度

而说起

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

1的移动端UI解决方案, 那就不得不提大名鼎鼎的vant了, 我之前也没用过

const foo = (a, b) => {};
复制代码

3, 但见招拆招, 兵来将挡水来土掩, 至此, 技术选型就完成了, 剩下的就是踩(开)坑(发)了

说踩(干)就踩(干)

环境信息

const foo = (a, b) => {};
复制代码

4:

const foo = (a, b) => {};
复制代码

5

const foo = (a, b) => {};
复制代码

6:

const foo = (a, b) => {};
复制代码

7

const foo = (a, b) => {};
复制代码

8:

const foo = (a, b) => {};
复制代码

9

const foo = (a: string): void => {};
复制代码

0:

const foo = (a: string): void => {};
复制代码

1

package.json

先贴一下我的

const foo = (a: string): void => {};
复制代码

2:

{
  "name": "vue-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build --base=/path1/",
    "build:test": "vite build --mode=test --base=/path1/path2/",
    "preview": "vite preview --port 4173",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "vant": "^3.5.4",
    "vconsole": "^3.14.6",
    "vue": "^3.2.37",
    "vue-router": "^4.1.3",
    "weixin-js-sdk": "^1.6.0"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.1.4",
    "@vitejs/plugin-vue": "^3.0.1",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@xianzhengquan/postcss-px-2-vw": "^0.0.1",
    "eslint": "^8.21.0",
    "eslint-plugin-vue": "^9.3.0",
    "object-assign": "^4.1.1",
    "prettier": "^2.7.1",
    "sass": "^1.54.4",
    "unplugin-vue-components": "^0.22.4",
    "vite": "^3.0.4"
  },
  "peerDependencies": {
    "postcss": "^8.4.16"
  }
}
复制代码

项目是按照Vue3官方文档上的步骤来创建的, 这个文档上写的很详细, 这里就不再熬述了

VS Code扩展

这里我使用的是官方推荐的Vue Language Features (Volar), 它提供了

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

4的语法高亮功能, 以及它和著名的Vetur有些冲突, 于是我就把

const foo = (a: string): void => {};
复制代码

4卸载了, 但官方推荐的

const foo = (a: string): void => {};
复制代码

5并没有提供代码块, 而就在我苦恼之际, 我阅读

const foo = (a: string): void => {};
复制代码

5的文档后发现里面提到了一个Vue VSCode Snippets的扩展, 于是我就安装了, 一开始不是太习惯, 后来就适应了, 我使用的是

const foo = (a: string): void => {};
复制代码

7, 但一般为了方便, 我就只敲

const foo = (a: string): void => {};
复制代码

8, 然后鼠标选择

const foo = (a: string): void => {};
复制代码

7, 这样就会有一个

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

4的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

7

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

8的基础代码块了

css预处理器

这里的

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

3我选择的是

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

4, 文档是sass, 这里之所以用的是

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

4而不是我所熟悉的

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

6, 主要是因为想借此机会学一学

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

4, 还有就是上面提到的

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

8所提供的模板中的

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

3用的也是

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

4, 于是我就直接使用

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

4了, 它的语法和

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

6有些类似,

//https://github.com/evrone/postcss-px-to-viewport
//https://github.com/evrone/postcss-px-to-viewport/issues/83

module.exports = {
  plugins: {
    '@xianzhengquan/postcss-px-2-vw': {
      viewportWidth: 750
    }
  }
};
复制代码

3的写法类似,

//https://github.com/evrone/postcss-px-to-viewport
//https://github.com/evrone/postcss-px-to-viewport/issues/83

module.exports = {
  plugins: {
    '@xianzhengquan/postcss-px-2-vw': {
      viewportWidth: 750
    }
  }
};
复制代码

4有些不同, 有差异, 但就我目前使用的程度上来说还好, 其他的文档上解释得也比较详细, 这里就不展开了

使用

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

4而不是

//https://github.com/evrone/postcss-px-to-viewport
//https://github.com/evrone/postcss-px-to-viewport/issues/83

module.exports = {
  plugins: {
    '@xianzhengquan/postcss-px-2-vw': {
      viewportWidth: 750
    }
  }
};
复制代码

6做文件扩展名是因为

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

4是

//https://github.com/evrone/postcss-px-to-viewport
//https://github.com/evrone/postcss-px-to-viewport/issues/83

module.exports = {
  plugins: {
    '@xianzhengquan/postcss-px-2-vw': {
      viewportWidth: 750
    }
  }
};
复制代码

8的

//https://github.com/evrone/postcss-px-to-viewport
//https://github.com/evrone/postcss-px-to-viewport/issues/83

module.exports = {
  plugins: {
    '@xianzhengquan/postcss-px-2-vw': {
      viewportWidth: 750
    }
  }
};
复制代码

9,

//https://github.com/evrone/postcss-px-to-viewport
//https://github.com/evrone/postcss-px-to-viewport/issues/83

module.exports = {
  plugins: {
    '@xianzhengquan/postcss-px-2-vw': {
      viewportWidth: 750
    }
  }
};
复制代码

8能用的语法在

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

4中也能用, 同时由于它和

//https://github.com/evrone/postcss-px-to-viewport
//https://github.com/evrone/postcss-px-to-viewport/issues/83

module.exports = {
  plugins: {
    '@xianzhengquan/postcss-px-2-vw': {
      viewportWidth: 750
    }
  }
};
复制代码

8的相似性, 使得它更容易上手

vite.config.js

//详细配置请查看: https://github.com/cuth/postcss-pxtorem#readme
/**
 * rootValue:
 * 最终元素值 = 设计稿上的值 / rootValue;
 * 比如设计稿上某元素某属性是40px, rootValue为100, 那么最终那个元素的那个属性会被转换为0.4rem;
 * 可是这个时候会发现, 字号还是小了, 因为默认根字号是16px, 而不是我们设置的100px, 因此需要修改真正的根字号,
 * 也就是html标签的font-size值
 *
 * replace (Boolean) Replaces rules containing rems instead of adding fallbacks.
 * 替换包含rem的规则, 而不是增加回退规则
 * 默认为true, 表示直接将px转换为rem
 * 若为false, 除了转换px为rem外, 还会保留原来的px单位
 * 例如:
 * div{
 *  width: xx px;
 * }
 * replace: true, 转换结果为:
 * div{
 *  width: xx / rootValue rem;
 * }
 * replace: false, 转换结果为:
 * div{
 *  width: xx px;
 *  width: xx / rootValue rem;
 * }
 */

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100, //根元素字号(单位px)
      unitPrecision: 5, //转换成rem后, 小数点后保留几位
      propList: ['*'], //需要转成rem单位的属性
      selectorBlackList: [], //选择器黑名单(哪些不用转成rem)
      replace: true, //是否替换包含rem的规则, 而不是增加回退规则
      mediaQuery: false, //是否转换媒体查询中的px为rem
      minPixelValue: 0, //需要转换的最小px值
      exclude: '' //排除项, 即不需要转换的目录或文件
    }
  }
};
复制代码

3的配置如下:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

主要是做了

const foo = (a, b) => {};
复制代码

3

//详细配置请查看: https://github.com/cuth/postcss-pxtorem#readme
/**
 * rootValue:
 * 最终元素值 = 设计稿上的值 / rootValue;
 * 比如设计稿上某元素某属性是40px, rootValue为100, 那么最终那个元素的那个属性会被转换为0.4rem;
 * 可是这个时候会发现, 字号还是小了, 因为默认根字号是16px, 而不是我们设置的100px, 因此需要修改真正的根字号,
 * 也就是html标签的font-size值
 *
 * replace (Boolean) Replaces rules containing rems instead of adding fallbacks.
 * 替换包含rem的规则, 而不是增加回退规则
 * 默认为true, 表示直接将px转换为rem
 * 若为false, 除了转换px为rem外, 还会保留原来的px单位
 * 例如:
 * div{
 *  width: xx px;
 * }
 * replace: true, 转换结果为:
 * div{
 *  width: xx / rootValue rem;
 * }
 * replace: false, 转换结果为:
 * div{
 *  width: xx px;
 *  width: xx / rootValue rem;
 * }
 */

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100, //根元素字号(单位px)
      unitPrecision: 5, //转换成rem后, 小数点后保留几位
      propList: ['*'], //需要转成rem单位的属性
      selectorBlackList: [], //选择器黑名单(哪些不用转成rem)
      replace: true, //是否替换包含rem的规则, 而不是增加回退规则
      mediaQuery: false, //是否转换媒体查询中的px为rem
      minPixelValue: 0, //需要转换的最小px值
      exclude: '' //排除项, 即不需要转换的目录或文件
    }
  }
};
复制代码

5的配置, 这同样也是

const foo = (a, b) => {};
复制代码

3文档中提到的一个方法: vant#按需引入组件样式

lint

//详细配置请查看: https://github.com/cuth/postcss-pxtorem#readme
/**
 * rootValue:
 * 最终元素值 = 设计稿上的值 / rootValue;
 * 比如设计稿上某元素某属性是40px, rootValue为100, 那么最终那个元素的那个属性会被转换为0.4rem;
 * 可是这个时候会发现, 字号还是小了, 因为默认根字号是16px, 而不是我们设置的100px, 因此需要修改真正的根字号,
 * 也就是html标签的font-size值
 *
 * replace (Boolean) Replaces rules containing rems instead of adding fallbacks.
 * 替换包含rem的规则, 而不是增加回退规则
 * 默认为true, 表示直接将px转换为rem
 * 若为false, 除了转换px为rem外, 还会保留原来的px单位
 * 例如:
 * div{
 *  width: xx px;
 * }
 * replace: true, 转换结果为:
 * div{
 *  width: xx / rootValue rem;
 * }
 * replace: false, 转换结果为:
 * div{
 *  width: xx px;
 *  width: xx / rootValue rem;
 * }
 */

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100, //根元素字号(单位px)
      unitPrecision: 5, //转换成rem后, 小数点后保留几位
      propList: ['*'], //需要转成rem单位的属性
      selectorBlackList: [], //选择器黑名单(哪些不用转成rem)
      replace: true, //是否替换包含rem的规则, 而不是增加回退规则
      mediaQuery: false, //是否转换媒体查询中的px为rem
      minPixelValue: 0, //需要转换的最小px值
      exclude: '' //排除项, 即不需要转换的目录或文件
    }
  }
};
复制代码

7的配置每个人都有每个人的习惯, 在这之前我一直用的是

//详细配置请查看: https://github.com/cuth/postcss-pxtorem#readme
/**
 * rootValue:
 * 最终元素值 = 设计稿上的值 / rootValue;
 * 比如设计稿上某元素某属性是40px, rootValue为100, 那么最终那个元素的那个属性会被转换为0.4rem;
 * 可是这个时候会发现, 字号还是小了, 因为默认根字号是16px, 而不是我们设置的100px, 因此需要修改真正的根字号,
 * 也就是html标签的font-size值
 *
 * replace (Boolean) Replaces rules containing rems instead of adding fallbacks.
 * 替换包含rem的规则, 而不是增加回退规则
 * 默认为true, 表示直接将px转换为rem
 * 若为false, 除了转换px为rem外, 还会保留原来的px单位
 * 例如:
 * div{
 *  width: xx px;
 * }
 * replace: true, 转换结果为:
 * div{
 *  width: xx / rootValue rem;
 * }
 * replace: false, 转换结果为:
 * div{
 *  width: xx px;
 *  width: xx / rootValue rem;
 * }
 */

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100, //根元素字号(单位px)
      unitPrecision: 5, //转换成rem后, 小数点后保留几位
      propList: ['*'], //需要转成rem单位的属性
      selectorBlackList: [], //选择器黑名单(哪些不用转成rem)
      replace: true, //是否替换包含rem的规则, 而不是增加回退规则
      mediaQuery: false, //是否转换媒体查询中的px为rem
      minPixelValue: 0, //需要转换的最小px值
      exclude: '' //排除项, 即不需要转换的目录或文件
    }
  }
};
复制代码

8,

//详细配置请查看: https://github.com/cuth/postcss-pxtorem#readme
/**
 * rootValue:
 * 最终元素值 = 设计稿上的值 / rootValue;
 * 比如设计稿上某元素某属性是40px, rootValue为100, 那么最终那个元素的那个属性会被转换为0.4rem;
 * 可是这个时候会发现, 字号还是小了, 因为默认根字号是16px, 而不是我们设置的100px, 因此需要修改真正的根字号,
 * 也就是html标签的font-size值
 *
 * replace (Boolean) Replaces rules containing rems instead of adding fallbacks.
 * 替换包含rem的规则, 而不是增加回退规则
 * 默认为true, 表示直接将px转换为rem
 * 若为false, 除了转换px为rem外, 还会保留原来的px单位
 * 例如:
 * div{
 *  width: xx px;
 * }
 * replace: true, 转换结果为:
 * div{
 *  width: xx / rootValue rem;
 * }
 * replace: false, 转换结果为:
 * div{
 *  width: xx px;
 *  width: xx / rootValue rem;
 * }
 */

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100, //根元素字号(单位px)
      unitPrecision: 5, //转换成rem后, 小数点后保留几位
      propList: ['*'], //需要转成rem单位的属性
      selectorBlackList: [], //选择器黑名单(哪些不用转成rem)
      replace: true, //是否替换包含rem的规则, 而不是增加回退规则
      mediaQuery: false, //是否转换媒体查询中的px为rem
      minPixelValue: 0, //需要转换的最小px值
      exclude: '' //排除项, 即不需要转换的目录或文件
    }
  }
};
复制代码

9以及

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

00, 同时也配置了保存时候对代码进行

//详细配置请查看: https://github.com/cuth/postcss-pxtorem#readme
/**
 * rootValue:
 * 最终元素值 = 设计稿上的值 / rootValue;
 * 比如设计稿上某元素某属性是40px, rootValue为100, 那么最终那个元素的那个属性会被转换为0.4rem;
 * 可是这个时候会发现, 字号还是小了, 因为默认根字号是16px, 而不是我们设置的100px, 因此需要修改真正的根字号,
 * 也就是html标签的font-size值
 *
 * replace (Boolean) Replaces rules containing rems instead of adding fallbacks.
 * 替换包含rem的规则, 而不是增加回退规则
 * 默认为true, 表示直接将px转换为rem
 * 若为false, 除了转换px为rem外, 还会保留原来的px单位
 * 例如:
 * div{
 *  width: xx px;
 * }
 * replace: true, 转换结果为:
 * div{
 *  width: xx / rootValue rem;
 * }
 * replace: false, 转换结果为:
 * div{
 *  width: xx px;
 *  width: xx / rootValue rem;
 * }
 */

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100, //根元素字号(单位px)
      unitPrecision: 5, //转换成rem后, 小数点后保留几位
      propList: ['*'], //需要转成rem单位的属性
      selectorBlackList: [], //选择器黑名单(哪些不用转成rem)
      replace: true, //是否替换包含rem的规则, 而不是增加回退规则
      mediaQuery: false, //是否转换媒体查询中的px为rem
      minPixelValue: 0, //需要转换的最小px值
      exclude: '' //排除项, 即不需要转换的目录或文件
    }
  }
};
复制代码

7格式化的操作:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

但这里还是想和大家聊一聊

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

4默认的

//详细配置请查看: https://github.com/cuth/postcss-pxtorem#readme
/**
 * rootValue:
 * 最终元素值 = 设计稿上的值 / rootValue;
 * 比如设计稿上某元素某属性是40px, rootValue为100, 那么最终那个元素的那个属性会被转换为0.4rem;
 * 可是这个时候会发现, 字号还是小了, 因为默认根字号是16px, 而不是我们设置的100px, 因此需要修改真正的根字号,
 * 也就是html标签的font-size值
 *
 * replace (Boolean) Replaces rules containing rems instead of adding fallbacks.
 * 替换包含rem的规则, 而不是增加回退规则
 * 默认为true, 表示直接将px转换为rem
 * 若为false, 除了转换px为rem外, 还会保留原来的px单位
 * 例如:
 * div{
 *  width: xx px;
 * }
 * replace: true, 转换结果为:
 * div{
 *  width: xx / rootValue rem;
 * }
 * replace: false, 转换结果为:
 * div{
 *  width: xx px;
 *  width: xx / rootValue rem;
 * }
 */

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100, //根元素字号(单位px)
      unitPrecision: 5, //转换成rem后, 小数点后保留几位
      propList: ['*'], //需要转成rem单位的属性
      selectorBlackList: [], //选择器黑名单(哪些不用转成rem)
      replace: true, //是否替换包含rem的规则, 而不是增加回退规则
      mediaQuery: false, //是否转换媒体查询中的px为rem
      minPixelValue: 0, //需要转换的最小px值
      exclude: '' //排除项, 即不需要转换的目录或文件
    }
  }
};
复制代码

7配置, 不是因为它用的是

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

04, 而是因为它默认的

//详细配置请查看: https://github.com/cuth/postcss-pxtorem#readme
/**
 * rootValue:
 * 最终元素值 = 设计稿上的值 / rootValue;
 * 比如设计稿上某元素某属性是40px, rootValue为100, 那么最终那个元素的那个属性会被转换为0.4rem;
 * 可是这个时候会发现, 字号还是小了, 因为默认根字号是16px, 而不是我们设置的100px, 因此需要修改真正的根字号,
 * 也就是html标签的font-size值
 *
 * replace (Boolean) Replaces rules containing rems instead of adding fallbacks.
 * 替换包含rem的规则, 而不是增加回退规则
 * 默认为true, 表示直接将px转换为rem
 * 若为false, 除了转换px为rem外, 还会保留原来的px单位
 * 例如:
 * div{
 *  width: xx px;
 * }
 * replace: true, 转换结果为:
 * div{
 *  width: xx / rootValue rem;
 * }
 * replace: false, 转换结果为:
 * div{
 *  width: xx px;
 *  width: xx / rootValue rem;
 * }
 */

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100, //根元素字号(单位px)
      unitPrecision: 5, //转换成rem后, 小数点后保留几位
      propList: ['*'], //需要转成rem单位的属性
      selectorBlackList: [], //选择器黑名单(哪些不用转成rem)
      replace: true, //是否替换包含rem的规则, 而不是增加回退规则
      mediaQuery: false, //是否转换媒体查询中的px为rem
      minPixelValue: 0, //需要转换的最小px值
      exclude: '' //排除项, 即不需要转换的目录或文件
    }
  }
};
复制代码

7规则背后作者的一些想法, 由于和我以前的习惯相悖, 一开始我还是有些排斥的, 但最后慢慢理解了, 就接受了, 同时觉得挺了不起的, 不愧行业中顶尖的人, 首先贴一下我的配置:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

06:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

Delete CR错误

关于这个问题, 掘金上有大佬做了详细的解释, 详情可以看这篇文章: Delete

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

07eslint(prettier/prettier) 错误的解决方案, 我司开发人员用的电脑都是

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

08系统, 于是我就直接将其配置成了

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

09

vue script和style标签的缩进问题

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

10是否在

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

1

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

12和

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

13标签中缩进, 尤大的习惯是不缩进, 而我个人的习惯是缩进, 这个因人而异, 没有好坏对错之分,

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

04官网 Vue files script and style tags indentation中有尤大的一个解释: Indent script and style tags content in *.vue files#a comment from the creator of vue,

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

15增加了一个选项来让用户使用, 我个人很喜欢这个选项

arrowParens(箭头函数圆括号)

接下来是箭头函数圆括号的问题, 一直以来我都是尽可能的省略圆括号, 比如只有一个参数的时候我会省略它的圆括号:

const foo = a => {};
复制代码

多个参数的时候才写:

const foo = (a, b) => {};
复制代码

我在做这个项目之前, 一直都是这个写法, 而这个项目默认的配置却是: 无论有多少参数都不省略圆括号. 我觉得这样比较地影响观感, 一个参数写什么括号嘛, 看着多难看, 又不报错, 多个参数才需要写括号, 不写就会报错了, 当然在用

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

16的时候, 一个参数也要写括号的, 这样才能声明该参数的类型, 比如:

const foo = (a: string): void => {};
复制代码

可我还是不理解为何它要采用无论有多少参数都不省略圆括号的策略, 于是我就去

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

04的官网上看了看, 文档Arrow Function Parentheses中关于箭头函数圆括号的解释给了我答案:

At first glance, avoiding parentheses may look like a better choice because of less visual noise. However, when Prettier removes parentheses, it becomes harder to add type annotations, extra arguments or default values as well as making other changes. Consistent use of parentheses provides a better developer experience when editing real codebases, which justifies the default value for the option.

乍一看，避免使用小括号可能是一个更好的选择，因为可以减少视觉噪音。然而，当Prettier删除小括号时，就很难添加类型注释、额外的参数或默认值以及进行其他修改。在编辑真正的代码库时，小括号的一致使用为开发者提供了更好的体验，这证明了该选项的默认值是合理的。

看完这段话, 瞬间醍醐灌顶, 是啊, 有了小括号, 才使得

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

16的类型注释成为了可能, 以及也方便设置默认值, 所有参数都使用括号使得我们的代码具有了高度的一致性, 易读也易用, 于是我就将这个用法保留了下来

vant相关问题

postcss.config.js

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

19中对

const foo = (a, b) => {};
复制代码

3进行了配置之后, 就不需要再次在

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

21中进行注册了, 直接在我们的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

1文件中使用即可

除了这个

//详细配置请查看: https://github.com/cuth/postcss-pxtorem#readme
/**
 * rootValue:
 * 最终元素值 = 设计稿上的值 / rootValue;
 * 比如设计稿上某元素某属性是40px, rootValue为100, 那么最终那个元素的那个属性会被转换为0.4rem;
 * 可是这个时候会发现, 字号还是小了, 因为默认根字号是16px, 而不是我们设置的100px, 因此需要修改真正的根字号,
 * 也就是html标签的font-size值
 *
 * replace (Boolean) Replaces rules containing rems instead of adding fallbacks.
 * 替换包含rem的规则, 而不是增加回退规则
 * 默认为true, 表示直接将px转换为rem
 * 若为false, 除了转换px为rem外, 还会保留原来的px单位
 * 例如:
 * div{
 *  width: xx px;
 * }
 * replace: true, 转换结果为:
 * div{
 *  width: xx / rootValue rem;
 * }
 * replace: false, 转换结果为:
 * div{
 *  width: xx px;
 *  width: xx / rootValue rem;
 * }
 */

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100, //根元素字号(单位px)
      unitPrecision: 5, //转换成rem后, 小数点后保留几位
      propList: ['*'], //需要转成rem单位的属性
      selectorBlackList: [], //选择器黑名单(哪些不用转成rem)
      replace: true, //是否替换包含rem的规则, 而不是增加回退规则
      mediaQuery: false, //是否转换媒体查询中的px为rem
      minPixelValue: 0, //需要转换的最小px值
      exclude: '' //排除项, 即不需要转换的目录或文件
    }
  }
};
复制代码

5之外, 还有移动端适配, 这里我使用的是

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

24的方案,

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

25方案考虑到要监听浏览器缩放事件, 频繁修改根字号, 而且配置要比这个繁琐, 再加上

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

24移动端的兼容性已经很好了, 而且我也想在实际项目中用一用, 之前只用过

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

25,

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

24还没有特别完整的项目使用, 于是就采用了

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

24的方案

vant官方文档#浏览器适配里面推荐了一个

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

30的解决方案: postcss-px-to-viewport, 这个方案倒不是说不好, 只是照文档上来使用的时候

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

31给我报了个

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

32:

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide:
https://evilmartians.com/chronicles/postcss-8-plugin-migration
复制代码

对于这个警告, 我最终在插件的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

33中找到了解决方案: 支持 postcss-8, 改用评论中提到的这个插件: @xianzhengquan/postcss-px-2-vw就没有这个迁移的警告了, 同时还要安一下object-assign, 不然会报错

我参照警告的链接文章里所说的对

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

31做了优化,

const foo = (a: string): void => {};
复制代码

2最终改为了上面贴出来那样, 具体的配置和由来参考

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

36文件:

//https://github.com/evrone/postcss-px-to-viewport
//https://github.com/evrone/postcss-px-to-viewport/issues/83

module.exports = {
  plugins: {
    '@xianzhengquan/postcss-px-2-vw': {
      viewportWidth: 750
    }
  }
};
复制代码

以及在一开始的时候我打算看看

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

31是如何配置

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

25的, 因为之前使用

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

25方案都是加载的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

40文件, 比如页面中直接加载

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

41这样的, 并没有使用

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

31, 而这个尝试花了我3个小时, 最后就一句话:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

43, 这也是我对

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

31不熟导致的, 为了避免坑到其他人, 我也给

const foo = (a, b) => {};
复制代码

3提了一个

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

46: docs: add tips in advanced-usage.zh-CN.md, 同时这里也附上一些配置的解释,

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

47同样适用:

配置释义

//详细配置请查看: https://github.com/cuth/postcss-pxtorem#readme
/**
 * rootValue:
 * 最终元素值 = 设计稿上的值 / rootValue;
 * 比如设计稿上某元素某属性是40px, rootValue为100, 那么最终那个元素的那个属性会被转换为0.4rem;
 * 可是这个时候会发现, 字号还是小了, 因为默认根字号是16px, 而不是我们设置的100px, 因此需要修改真正的根字号,
 * 也就是html标签的font-size值
 *
 * replace (Boolean) Replaces rules containing rems instead of adding fallbacks.
 * 替换包含rem的规则, 而不是增加回退规则
 * 默认为true, 表示直接将px转换为rem
 * 若为false, 除了转换px为rem外, 还会保留原来的px单位
 * 例如:
 * div{
 *  width: xx px;
 * }
 * replace: true, 转换结果为:
 * div{
 *  width: xx / rootValue rem;
 * }
 * replace: false, 转换结果为:
 * div{
 *  width: xx px;
 *  width: xx / rootValue rem;
 * }
 */

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100, //根元素字号(单位px)
      unitPrecision: 5, //转换成rem后, 小数点后保留几位
      propList: ['*'], //需要转成rem单位的属性
      selectorBlackList: [], //选择器黑名单(哪些不用转成rem)
      replace: true, //是否替换包含rem的规则, 而不是增加回退规则
      mediaQuery: false, //是否转换媒体查询中的px为rem
      minPixelValue: 0, //需要转换的最小px值
      exclude: '' //排除项, 即不需要转换的目录或文件
    }
  }
};
复制代码

样式定制/覆盖

这个需求比较频繁, 毕竟有设计稿, 不太可能完完全全按照UI组件库的默认样式来开发, 于是我就对它的样式进行了一些配置, 详细内容请查阅ConfigProvider 全局配置, 我这里使用的是修改基础变量的方式: 基础变量, 同时文档示例工程中提到的示例仓库: Vant Demo中提供了另一种配置方式, 具体可以查看代码: theme config, 只是这个方式我并没有尝试过, 有用过的小伙伴欢迎在评论区留言讨论

List组件bug

在使用

const foo = (a, b) => {};
复制代码

3的过程中我发现

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

49会额外触发一次

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

50事件, 这个问题可查看[Bug Report] vant-list 监听的scroll事件和 vue-router的push后维持scroll冲突, 该

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

33中是路由切换导致额外触发一次

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

50, 本项目中数据多了, 导致触发了

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

53事件, 因此

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

49会多触发一次

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

50事件, 解决方法参考了上面提到的那个

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

33, 同时这里贴一下关键代码:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

0

每次都初始化

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

49, 这样就不会多触发一次

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

50事件了, 具体可以查阅上面提到的那个

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

33

调试工具

这里我用的调试工具是vConsole, 使用起来非常方便, 同时功能强大, 它在手机端页面给我们提供了类似

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

60中的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

61, 是手机端页面调试的利器

组合式函数/组合式API

这里主要是我个人使用

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

4的一些记录, 不敢说写得多么好, 就只是我个人的一些方法, 由于业务逻辑并不是特别的复杂, 具体的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

1的使用就不展开了, 这里主要用了一些

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

64, 个人觉得它和

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

9中的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

66有些像, 同时文档中推荐以

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

67开头, 比如我这里用到的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

68:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

1

设置

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

69的背景色. 有的页面背景色和其他页面不一样, 这个时候需要单独处理一下, 然后离开那个页面的时候移除一下, 因为下一个页面的背景色和它不一样, 还是贴一下关键代码:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

2

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

4官网对于

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

64有更详细的介绍, 详情可移步官方文档: 组合式函数

微信公众号网页开发

接下来就是微信公众号网页开发的主要内容了, 都是我个人遇到的坑, 在此和大家分享一下, 如果能帮到大家就再好不过了

太长不看版

路由推荐使用

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

72形式的,

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

73形式的路由最主要的影响是

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74参数, 因为

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

75及其后面内容无法以查询字符串参数的形式传递(可使用

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

76处理一下, 但

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

72形式的路由就没有这个烦恼了, 详情可查阅这个贴子: A sharp in URL parameter), 如果实在是要用

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

73形式的, 注意获取到的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79会在

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

75前面, 同时如果有其他参数的时候也要留意

签名

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74传

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

82, 这也是官方文档推荐的写法, 并且留意前端传递的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74, 实际发起请求的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74, 后端用于签名的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74三者要一致

苹果手机权限验证配置的时候会以第一次进入页面的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74为准, 同时

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

87也会以第一次的为准, 要么提前配置所有可能用到的接口, 要么只在每次用户产生交互的时候配置

获取本地图片

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

88返回的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

89数据需要处理一下才可用于

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

90标签显示

网页授权流程

官方文档: 微信网页开发#网页授权, 我这个项目的后端之前做过一个微信公众号网页开发的项目, 因此他保留了之前的代码, 而之前的项目中, 网页授权获取

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79是后端来做, 因此我这里也就沿用了之前的做法, 即后端来做, 大致流程如下:

访问

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

92获取

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79可以前端来做(前端拼地址, 官网文档上的做法), 也可以后端来做, 后端的处理方式是接收一个

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74, 也就是文档中提到的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

95, 然后

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

96到

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

92(后端帮忙拼), 这里需要注意

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

95要用

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

76处理一下(当使用

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

73路由的时候尤其需要, 不然

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

75以及后面的字符将无法传递过去), 要让浏览器不把它当一个地址, 而是一个回调地址参数, 微信做跳转的时候会做解码的操作; 后端拼的话注意后端的接口不能以

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

02的形式调用, 而应该以

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

03的形式使用, 只有地址栏中的链接返回

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

96, 浏览器才会去找

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

05中的

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

06做重定向,

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

02请求则不会

然后是获取

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

08, 以及用户信息, 这部分操作也可以后端来做, 比如我这个项目就是后端来做的, 我获取到

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79之后再次调后端的接口, 然后后端给我返回用户信息以及

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

08, 具体操作文档上也比较详细, 就不再熬述了, 接下来和大家分享一下我遇到的坑

坑一: 登录和重定向(回调页面redirect_uri)

涉及到微信的

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

11, 那自然是需要登录了, 我们在登录页做登录的操作, 登录成功了再走后续的逻辑

由于之前有运维小伙伴

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

12配

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

72路由配置了很久很久最后耽误上线的先例, 于是我把脚手架初始化的项目时候默认的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

72路由改成了

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

73形式的路由, 以及我从入行开始接触的前端路由的形式就一直都是

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

72形式的, 对

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

73形式的不熟, 只知道

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

75后面的部分服务端不认, 只是浏览器认, 以为这个问题不影响, 然而这其实就是问题的答案了:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

75及其后面的内容无法发送到服务端.

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

75在浏览器端主要是起一个分隔定位的作用, 比如我们最常见的

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

21, 但请求后端的时候

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

75及其后面的部分是无法发送到后端的. 详情可以看看阮一峰老师的这篇文章: URL的井号. 简而言之就是我传递的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

75及其之后的参数丢失了, 目前解决方案是后端来帮我拼

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

24(后端

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

96

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

05中的

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

06字段中是可以使用

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

75的), 不然我传过去的就成

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

29了, 就不对了, 就进不到登录页而会去到首页了. 其实最好的方式是我这边将

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

75做一个转义即可, 就是用上面提到的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

76, 但当时我并没能想到这个方法, 和项目经理(后端)聊了聊我遇到的问题之后他说他协助我来解决, 于是最终就由他那边来处理了

那具体情况是怎样的呢? 我们一起来看一下吧:

我们在登录页:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

32进行登录的操作, 也就是获取

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79再获取

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

08去进行登录的操作

登录页给后端提供的获取

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79的接口传当前页面的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74, 然后去

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

11获取

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

08登录, 获取

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79的过程会进行多次跳转, 获取到

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79之后会带着

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79跳转回登录页:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

43

然后问题就出现了: 获取到

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79之后不是带着

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79跳转到登录页, 而是带着

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79跳到了首页. 这就很奇怪了啊, 回调页面参数我明明是在登录页传的当前页面的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74, 也就是登录页的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74, 怎么会是带着

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79跳到首页呢? 多方调试之后我才发现, 是因为

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

24没有传过去导致的, 也就是说, 我传递的是

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

32, 但后端收到的却是

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

52, 因此获取到

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79之后的跳转地址从

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

32变成了

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

52, 也就是获取到

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79之后带着

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79跳转到了首页而非登录页

坑二: 权限验证配置(wx.config)

这个问题是我这个项目中遇到的最蛋疼的的问题, 我想也有不少人遇到, 因为网上各种问这个的, 也有各种解答这个的, 然后各种方式都有各种方式的道理, 但是似乎都不对, 而这正是这个问题的"奇妙"之处...

invalid signature

这是我遇到的最多次的问题, 网上搜了之后发现很多人也遇到过这个问题, 遇到配置错误可参照官方文档上进行排查: 附录5-常见错误及解决方法, 这个问题我调了好久, 总结一下大概需要注意那么几点:

不要使用

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

73形式的路由,

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

75和它后面部分会传不过去, 以及

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

11获取

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79的时候, 获取成功回调回来的时候

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

79参数会在

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

75之前, 这可能会对签名造成影响, 需要考虑进去

调后端签名接口的时候传的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74用这个:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

82(这也是官方文档中推荐的做法)

参照附录5-常见错误及解决方法中

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

66的排错步骤逐一排查

确保传给后端的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74和实际发起请求的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74, 以及后端拿去签名的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74三者一致

苹果手机权限验证配置的时候会以第一次进入页面的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74为准(后面会提供可用的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

40代码)

传给后端的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74和实际发起请求的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74一致这个问题都比较好调试, 关键是后端拿到我们传的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74去签名的时候是不是就是我们传过去的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74, 他们有没有再加其他的参数, 我这里遇到过一次报错是因为后端之前做微信公众号网页项目的时候苹果手机需要多加一个

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

76这样的参数才行, 然后我这个项目的时候也加了这个参数, 从而导致的报错

以及苹果手机需要特别处理一下, 下面

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

77部分会详细阐述

the permission value is offline verifying

这是我遇到另一个问题, 只是这个错是在苹果手机上遇到的, 安卓手机上并没遇到, 造成这个问题的原因是: 苹果手机权限验证配置的时候不但会以第一次进入页面的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74为准,

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

87也会以第一次的为准. 解决方式是: 要么提前配置所有可能用到的接口, 要么只在每次用户产生交互的时候配置

我的处理方式是前者: 提前配置所有可能用到的接口

我这里需要禁用分享

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

80, 以及选择图片

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

81, 苹果手机提前配置二者, 然后在点击的时候就不再单独配置选择图片了, 不然就会报错:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

82, 具体的代码下面会提供

坑三: 获取本地图片(wx.getLocalImgData)无法显示问题

选择图片之后将图片转为

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

89, 但遇到一个问题: 得到的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

89无法显示, 这个问题我推测是差个类型, 为什么是推测呢, 因为这个问题最终是后端解决的, 本来是我这边来处理的, 但我在调微信权限验证配置的问题, 后端刚好有空, 就他处理了.

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

89无法转成图片, 一般就是差个类型:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

86, 这个问题需要留意

处理微信相关逻辑的参考代码

这里也贴一下我自己的代码, 欢迎小伙伴们在评论区跟我留言讨论

获取程序的运行平台的方法

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

87:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

3

签名的时候需要传平台参数, 因此需要判断一下当前运行平台是安卓还是

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

88

根据运行平台处理签名url的方法

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

89:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

4

安卓手机每次路由变更都重新获取

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74, 苹果手机使用第一次进入的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74, 也就是说苹果手机需要记录第一次进入程序时候的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74, 后续使用的时候要从

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

93当中取,

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

93的键名可以根据实际情况来修改, 比如在

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

95中调用一下这个方法, 然后就会根据当前的环境和操作类型做处理了:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

95:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

5

后续在需要获取

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74的代码中直接调

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

98或者

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

99使用即可

权限验证配置方法(wx.config)

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

00:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

6

方法只接收一个参数

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

87, 哪里需要配置哪里就调用这个方法, 同时传需要的

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

87即可. 方法内部获取签名数据的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

03名称可以修改为自己的, 我这里是

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

04, 参数如果不一样也可以修改, 但一般都是平台参数和

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

74参数, 返回的结构一般也一样. 整个方法封装成了

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

06, 外部使用的时候方便以同步的形式来处理异步逻辑

选择图片(chooseImage)和获取本地图片(getLocalImgData)的方法

这里主要是将它们封装成了

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

06, 便于使用

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

08:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

7

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

09:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

8

人脸认证方法(选择图片之后将图片转为base64)

这里由于业务方的缘故, 因此并没有真正的做人脸认证, 只是简单得选一张图片或者拍个照传给后端

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

10:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

9

如果前端来处理

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://cn.vitejs.dev/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [VantResolver()]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});
复制代码

89无法显示的问题, 那么这里的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

12就需要处理一下了, 这里写一下伪代码, 仅供参考:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

0

同时这里需要注意的是

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

13语句中的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

14捕获到的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

15是

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

16代码块中抛出的第一个错误, 而这里具体指的是

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

06

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

18的结果, 也就是

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

06构造函数中

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

18方法中接收的参数, 但如果

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

21函数中直接

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

22这个

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

15的话得到的将是

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

24的结果, 而不是

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

18结果, 也就是说这么做会导致

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

21函数返回的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

06的状态是

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

28, 要想得到

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

29的结果, 必须使用

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

30方法处理一下:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

31

而具体使用自然是应该先进行配置

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

32, 然后再使用, 例如:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

1

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

21方法里面的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

34会依次执行, 当且仅当第一个

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

34之后的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

06

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

24了, 确切的说是状态变成了

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

28之后, 第一个

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

34之后的代码才会执行, 也就是说当这个

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

06的状态是

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

41或者

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

29的时候, 它后面的代码一定不会执行.

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

41变为

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

28则后续代码正常执行,

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

41变为

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

29则后续代码不执行, 且会抛出错误, 这个错误可以由

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

13语句中的

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

14捕获, 因此上面的写法和下面这个写法是等价的:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

2

全局导航守卫(afterEach)处理微信权限验证配置(wx.config)设置微信分享

由于所有页面都需禁止分享

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

80, 因此可以考虑在

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

50中处理, 然后选择图片

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

81的话用户每次点击的时候再进行配置, 当然了, 需要区分一下安卓和苹果手机, 具体代码如下:

路由配置文件中, 关键代码:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

3

苹果手机提前配置; 安卓手机只配置禁止分享

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

80, 后续用户点击的时候再单独配置选择图片

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

81即可

这里需要留意一下, 微信分享需要每个页面都配置, 比如只在

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

54页面配置, 那么在

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

54页面分享是正常的, 但换到

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

56页面, 然后在

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

56页面分享的话分享就不正常了, 就没法获取描述和

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

58图片了, 但是每个页面都配置代码就比较冗余, 此时也可以在

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

50中处理

这里也贴一下关键代码:

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

60:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

4

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

61和

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

62一般是固定的,

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码

63和

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-prettier'
  ],
  parserOptions: {
    ecmaVersion: 'latest'
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto', //行末换行符: auto表示保持当前的换行符
        singleQuote: true, //是否使用单引号替代双引号: 使用
        bracketSpacing: true, //是否在对象字面量中括号之间使用空格: 使用
        trailingComma: 'none', //在多行逗号分隔的句法结构中尽可能打印尾部逗号: 从不
        vueIndentScriptAndStyle: true //是否在vue script和style标签中缩进: 使用
      }
    ]
  }
};
复制代码