vue@2混合使用js和ts

场景

旧的vue项目使用的是js开发,后期想把有些纯js开发的文件逐步替换为ts

具体步骤

• 安装loader和typescript

  npm install typescript ts-loader --save-dev

• 配置@vue/cli
  一般度娘的结果就是添加下面的代码

   module.exports = {
    configureWebpack: {
      resolve: { extensions: ['.ts', '.tsx', '.js', '.json'] },
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            loader: 'ts-loader',
            exclude: /node_modules/,
            options: {
              appendTsSuffixTo: [/\.vue$/],
              happyPackMode: true,
            },
          },
        ],
      },
    },
  }

  但是我遇到了不一样的问题

  ERROR  Failed to compile with 1 error                                                                                                 4:54:18 PM
  This relative module was not found:
  * ./src/main.ts

  第一反应就是vue直接去找src/main.ts了，
  vue inspect一下，输出结果

  // ...
  entry: {
     app: [
       './src/main.ts'
     ]
  }
  // ...

  那直接把webpack配置改下就应该可以了。
  查了下@vue/cli配置文档，没有找到配置项
  直接在chainWebpack中修改吧

  module.exports = {
   chainWebpack(config) {
     config.entry('app').clear().add('./src/main.js')
   },
  }

  vue inspect一下，输出结果

  // ...
  entry: {
     app: [
       './src/main.js'
     ]
  }
  // ...

  这样就可以了。

PS

• 如果没有vue.config.js文件，直接创建一个就行了
• 我的@vue/cli-service版本为~4.5.0