webpack 升級4.x vue 渲染出錯

webpack 升級4.x vue 渲染出錯

原因

webpack 對於import 的語法實現更新
注:import 是 ES6標準,但不是服務器端node 的標準,這裏webpack相當於解析器,變相支持 import 語法,但不是說node環境支持import 語法.
從webpack 4.x 起 import 返回值 始終爲一個對象.
但是vue 渲染只支持 template 或者 render function.

解決方法

做以下修改,從對象中取出默認的渲染函數或模板
vue-loader 尤大 的說明

/*
Breaking Changes
The esModule option is now true by default, because this is necessary for ES-module-based scope hoisting to work. This means the export from a *.vue file is now an ES module by default, so async components via dynamic import like this will break:
*/
const Foo = () => import('./Foo.vue')
/*
Note: the above can continue to work with Vue 2.4 + vue-router 2.7, which will automatically resolve ES modules' default exports when dealing with async components. In earlier versions of Vue and vue-router you will have to do this:
*/
const Foo = () => import('./Foo.vue').then(m => m.default)
/*Alternatively, you can turn off the new behavior by explicitly using esModule: false in vue-loader options.

Similarly, old CommonJS-style requires will also need to be updated:
*/
// before
const Foo = require('./Foo.vue')

// after
const Foo = require('./Foo.vue').default