Vue-cli 3.0 之后拆分单 vue 文件为 .ts 和 .vue 文件

hesi726

8708人浏览 · 2018-07-05 14:25:42

hesi726 · 2018-07-05 14:25:42 发布

vue-cli 3.0 之后，VUE 的配置有很大的改变，

最简单的，把 HelloWorld.vue 文件中的 ts 代码拆分出去为 HelloWorld.ts

将 HelloWorkd.vue 中改为 <script lang="ts" src="./HelloWorld.ts"></script>

之后，运行将出错。

https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues/111

根据这儿的说法，需要修改 vue 的配置，

在 vue-cli 3.0之后， vue的配置单独卸载 vue.config.js 中，

  module.exports = {
 
  // ...
 
  chainWebpack: config => {
 
  // https://github.com/vuejs/vue-cli/issues/1104
 
  // typescript building error when import .vue file with separate .ts file, 即在 ts 文件中无法引入 .vue 组件;
 
  // 下面的代码解决上面这个 bug, 解决方法来源: https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues/111
 
  config.plugins.delete('fork-ts-checker');
 
  config.module
 
  .rule('ts')
 
  .use('ts-loader')
 
  .tap(options => {
 
  return { ...options,
 
  'transpileOnly': false
 
  }
 
  });
 
  }
 
  }