webpack 升级4.x vue 渲染出错

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_29594393/article/details/86572390

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