[vuejs/vuepress]vuepress不支持，怎么让它支持

0

修改config.js文件，增加对tsx文件的支持

{
    configureWebpack: {
        module: {
            rules: [
                {
                    test: /\.tsx$/,
                    exclude: /node_modules/,
                    use: [
                        'cache-loader',
                        {
                            loader: 'babel-loader',
                            options: {
                                babelrc: false,
                                configFile: false,
                                presets: [
                                    '@babel/preset-env', // 可以识别es6语法
                                    '@vue/babel-preset-jsx' // 解析jsx语法
                                ]
                            }
                        },
                        {
                            loader: 'ts-loader',
                            options: {
                                appendTsxSuffixTo: [/\.vue$/, /\.md$/]
                            }
                        }
                    ]
                }
            ]
        }
    },
}

CalmHarbin

9

不需要安装这三个依赖：babel-loader；cache-loader；ts-loader

babel-loader和cache-loader在vuepress已经有依赖了，如果你没有使用vuepress-plugin-typescript则需要安装ts-loader和typescript。ts-loader请安装8.x版本,因为vuepress内部使用的webpack4.x版本。 X

CalmHarbin

4

有安装这个插件但是（vuepress-plugin-typescript），里面都没有配置；我删除node_modules重新安装后tsx能跑起来，但是控制台会报很多错误，后来在tsconfig文件中加了“suppressImplicitAnyIndexErrors”: true ,就解决了

最终项目已经跑起来了，总之谢谢啦！

wocwin

3

如果要导入不带扩展名的 tsx 文件，您可能还需要此代码config.js

chainWebpack: (config) => {
    config.resolve.extensions.add(".tsx");
}

tlyau62

8

如果有人混合 vue-cli 和 vuepress 来创建项目，您可能需要此 webpack 配置才能使 tsx 正常工作。

babel 配置基于 vue-cli 默认值。

chainWebpack: (config) => {
    config.resolve.extensions.add(".tsx");

    config.module
      .rule("tsx")
      .test(/\.tsx$/)
      .use("cache-loader")
      .loader(require.resolve("cache-loader"))
      .end()
      .use("ts-loader")
      .loader(require.resolve("ts-loader"))
      .options({
        appendTsxSuffixTo: [/\.vue$/, /\.md$/],
        compilerOptions: {},
      })
      .end();
  },

tlyau62

5

我终于编写了一个支持 ts 和 tsx 的插件。希望可以帮助别人。

tlyau62

[vuejs/vuepress]vuepress不支持，怎么让它支持

回答

相关问题