Nuxt.js 2 如何使用 tdesign-vue？

发布者：前端集合 // 发布时间：2022-11-08 22:38:00 // 分类：经验记录 // 访问: 2,716 次 // 热度:

前情提要

最近在玩 nuxt.js 2，集成了几个 ui 框架进去玩。

首先尝试的是 ant design vue。基本没遇到啥问题，因为 nuxt.js 2 官方就是支持这个的。

然后试着集成 TDesign Vue 2 的版本。中间碰到了很多问题，网上没有现成资料，但最后我自己也都想办法解决了。

记录一下，方便同样遇到问题的人。

TDesign Vue 0.49.3 版本官方页面就有说明，即不支持 vue 2.7：

由于 vue 2.7 与 tdesign-vue 目前的其他依赖不兼容，请暂时保证您的 vue 版本在 2.7 以下。
建议您将项目依赖配置为vue: ~2.6.14。
如果项目同时使用了 vue-template-compiler，请保证 vue-template-compiler 的安装版本与vue一致。
接下来我们将支持在 vue 2.7 中使用，具体时间请关注版本更新动态。

但是你即使把 nuxt.js 中所有依赖降到 vue 2.6 对应的版本，nuxt.js 最后 build 以及 start 上线时都会编译报错。

原因分析

原因在于 nuxt.js 里有个内部模块 @nuxt/components 里依赖了vue-template-compiler，其版本号是 ^ 开头的，故在安装时 vue-template-compiler 依然会升级到 2.7 系列的版本，与 vue 2.6 系列对应不上，build 就会报错。

解决方案

• 修改 vue 相关依赖为：

  "core-js": "^3.19.3",
  "nuxt": "^2.15.8",
  "patch-package": "^6.5.0",
  "tdesign-vue": "^0.49.3",
  // 主要是这个依赖
  "vue": "~2.6.14",
  "vue-server-renderer": "~2.6.14",
  // 主要是这个依赖
  "vue-template-compiler": "~2.6.14"

• package.json 里的 script 加入

  "postinstall": "patch-package",

• 安装 patch-package

  npm install patch-package

• 修改 node_modules
  修改 node_modules/@nuxt/components/dist/loader.js 如下这句：

  const vueTemplateCompiler = require('vue-template-compiler');

  为

  const vueTemplateCompiler = require('../../../vue-template-compiler');

• 接着运行

  yarn patch-package @nuxt/components
  或者
  npx patch-package @nuxt/components

• 然后在项目根目录，你会发现多了一个 patches 文件夹，其代码如下

  diff --git a/node_modules/@nuxt/components/dist/loader.js b/node_modules/@nuxt/components/dist/loader.js
  index 8e1629c..3fc4118 100644
  --- a/node_modules/@nuxt/components/dist/loader.js
  +++ b/node_modules/@nuxt/components/dist/loader.js
  @@ -1,7 +1,7 @@
   'use strict';
   
   const fs = require('fs');
  -const vueTemplateCompiler = require('vue-template-compiler');
  +const vueTemplateCompiler = require('../../../vue-template-compiler');
   require('upath');
   require('globby');
   require('scule');

• 将 patches 文件夹提交到 git

• 修改项目根目录 nuxt.config.js 文件

  css: [
  'tdesign-vue/es/style/index.css'
  ],
  
  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  '@/plugins/tdesign'
  ],

• 在 plugins 文件夹（如无，则新建）新建文件 tdesign.js

  import Vue from 'vue'
  import TDesign from 'tdesign-vue';
  
  Vue.use(TDesign)

Ok，nuxt.js 2 就可以正常使用 tdesign-vue 了。

后面部署项目到服务器时，npm install 会自动按照 patches 文件夹内容修改 node_modules 包。从而保证不管运行多少次 npm install 都不落下对包的修改。

Tags: node.js, nuxt, nuxt.js, nuxt.js 2, tdesign, tdesign-vue, nuxt.js tdesign