2018年3月28日 星期三

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

沒有留言:

張貼留言