vueLoadPlugin和import

VueLoaderPlugin

vue-loader在15版本之后需要配合vueLoadPlugin才可以使用

引入

const { VueLoaderPlugin }= require('vue-loader');

配置

module.exports = {
  //...
  plugins: [
      new VueLoaderPlugin(),   
    ]
}

错误

在引入的时候如果将"{ }“去掉的话会报错，想去掉”{ }“可以使用下面的格式

const VueLoaderPlugin = require('vue-loader/lib/plugin');

import使用花括号{}和不使用花括号的区别

//A.js
export function A(){
  //...
}
export default function B(){
  //...
}

使用{}

括号里的变量是被指定的，必须与被导入模块对外接口(export)你名称相同
在下列引用中只有import {A} from './A'可以正确引用，因为A.js中有命名导出为A的代码

//B.js   在B.js中引人A.js
import {A} from './A'                   // 正确，因为A.js中有命名为A的export
import { myA } from './A'               // 错误！因为A.js中没有命名为myA的export
import { Something } from './A'         // 错误！因为A.js中没有命名为Something的export

不使用{}

import的命名是随意的
以下三种引用命名都可正确的引用到A.js，会解析到A.js中默认的export default即B函数

//B.js   在B.js中引人A.js
import B from './A'
import MyB from './A'
import Something from './A'

export default可以为模块指定默认输出，import可以为默认输出指定任意名字，这个时候就不需要用花括号{}
export default命令只能使用一次，import只可能对应一个方法

总结：
通过import xxx from "..."引入的，xxx已经是默认导出项的别名了。
而import { xxx } from "..."引入的，{ xxx }只是导出项的名字，而并非导入时的名字。