vueCli+vant+tsx使用问题

2022-03-31

字数统计: 560字 | 阅读时长≈ 2分钟

在vueCli+ts中按需引用vant没有样式？生产环境打包无vant样式？build失败？那是因为你没有配置这些

一、按需引用vant无样式

如果你通过以下配置后依然无样式，可在vue.config.js中配置css下面的requireModuleExtension: true属性,再重启服务查看

babel.config.js
plugins: [
  "import",
    {
      "libraryName": "vant",
      "style": true
    },
  "vant"
]
vue.config.js
{
  loader: "ts-loader",
  options: {
    getCustomTransformers: () => ({
      before: [
        require("ts-import-plugin")({
          libraryName: "vant",
          libraryDirectory: "es",
          style: true
        })
      ]
    }),
    compilerOptions: {
      module: "es2015"
    }
  }
}

二、生产环境打包无按需引入vant样式

配置vue.config.js中的parallel: false属性,该属性为是否使用thread-loader来解析babel或typescript,当配置为true时, 会将你的loader放在一个work池中，work池中的loader会受到一些限制，如：

这些loader不能产生新文件

无法获取webpack的选项配置

三、配置了ts-loader后，项目打包失败

{
  loader: "ts-loader",
  options: {
    happyPackMode: true, // 配置此属性
  }
}

四、如何使用vue.config.ts

通过查阅vue-cli-service源码后，发现启动时会有一个获取全局变量VUE_CLI_SERVICE_CONFIG_PATH,来确定使用的文件，如无配置将使用vue.config.js,因此可使用如下配置

安装cross-env ts-node
配置tsconfig.json

修改script命令

tsconfig.json // 让ts-node支持编译js
{
  "ts-node": {
    "transpileOnly": true,
    "compilerOptions": {
      "module": "commonjs"
    }
  }
}
package.json
{
  "script": {
    "service": "cross-env VUE_CLI_SERVICE_CONFIG_PATH=./vue.config.ts ts-node ./node_modules/@vue/cli-service/bin/vue-cli-service.js",
    "serve": "npm run service serve" // 等同于vue-cli-service serve 如需携带参数可通过 -- --mode dev
  }
}

五、node低版本运行服务，ts-node启动失败

报错 catch { Unknown Error token, 原因是因为低版本node无法支持识别 catch{}不带括号,解决方案

升级node版本
无法升级node时，可通过打补丁
- 安装patch-package,使用yarn命令时还需安装postinstall-postinstall,npm无需安装
- 修改node_modules中包的源码
- package.json中增加一条命令"postinstall": "patch-package"
- 运行npm run patch-package ts-node生成补丁包，后续重新安装包就都不会影响到。

打赏