Vue + webpack 集成 typescript遇到的问题

Vue工程中用webpack作为打包工具，集成typescript步骤以及遇到的问题如下：

1） 安装typescript以及ts-loader

       npm i --save-dev typescript  ts-loader

       用到的webpack版本为："webpack": "^3.6.0"   默认安装的typescript和ts-loader版本比较高，需要webpack 4.0以上版本配合才行（在编译过程中出现了错误）。所以安装一个比较低的版本：npm i --save-dev typescript@2.7.2 ts-loader@3.1.1

 

2） 新建一个ts文件，并在APP.vue中import这个文件

     hello.ts文件如下：

export const sayHello = (person: string) : string => {
    return 'hello, ' + person
}

APP.vue中import，并使用这个sayHello接口如下：

import {sayHello} from './hello'
console.log('sayhello is: ' + sayHello('apl'))

但npm run dev后出现错误，提示找不到./hello模块(因为没有在webpack中配置ts-loader)

3） webpack中配置ts-loader

      在webpack.base.conf.js中配置ts-loader如下：

      {
        test: /\.tsx?$/,
        loader: 'ts-loader'
      },

再次npm run dev 依然出现了错误，还是提示没有找到./hello模块(在webpack中没有配置对.ts文件后缀省略的处理)

4） webpack中配置对.ts后缀省略处理

在webpack.base.conf.js中配置.ts后缀省略处理如下：

resolve: {
    extensions: ['.js', '.ts', '.tsx', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
},

 

再次npm run dev 已成功。