Runtime + Compiler on Vue-Cli 3.0

有需求動態載入 component，
在 jsbin 做簡單的測試是沒問題，
但使用 Vue-Cli 3.0 的開發環境，
卻拋出以下錯誤

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

經一番奮鬥後，發現 Vue-Cli 3.0 的 webpack 設定，
預設載入的 Vue 是 vue.runtime.esm.js，
所以在 runtime 的時候會發生此問題，
需將  vue.runtime.esm.js 換成  vue.esm.js
在 run time 期間也有 compiler 可以用

那該怎麼做呢？

在根目錄下設定 vue.config.js 如下即可
 (若沒有此檔，請自行新增！)

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js'
      }
    }
  }
}

參考來源：

1. https://github.com/vuejs/vue/tree/dev/dist#explanation-of-build-files
2. https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md

關閉 Visual Studio 2017 自動編譯 ts 檔

在專案檔加入 <typescriptenabled>true</typescriptenabled>.

  <PropertyGroup>
    <TargetFramework>netcoreapp2.0</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
  </PropertyGroup>


reference:

TypeScriptCompileBlocked

If you are using a different build tool to build your project (e.g. gulp, grunt , etc.) and VS for the development and debugging experience, set true in your project. This should give you all the editing support, but not the build when you hit F5.