vue-loader是如何将.vue格式文件转换为组件的?

在vue-loader的源码里没有找到有关vue.extend的源码,但是单文件组件模式下,.vue文件被vue-loader编译后确实输出的是vue组件,请教大神到底是怎么一回事。
module.exports = {
entry: {

app: './src/main.js'

},
output: {

path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
  ? config.build.assetsPublicPath
  : config.dev.assetsPublicPath

},
resolve: {

extensions: ['.js', '.vue', '.json'],
alias: {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src'),
  'src': resolve('src'),
  'common': resolve('src/common'),
  'components': resolve('src/components'),
  'api': resolve('src/api'),
  'base': resolve('src/base')
}

},
module: {

rules: [
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
  },
  {
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
  },
  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
  },
  {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
    }
  }
]

}
}

这是webpack配置。入口文件main.js里有一行是
import App from './App',打印App的结果是
图片描述

阅读 7.9k
1 个回答

vue-loader做的事只是把.vue文件中的templatestyle编译到.js(编译到render函数),并混合到你在.vueexport出来的Object中。

产出的js只是导出了一个符合component定义的Object。


类似于文档:组件——局部注册中的那个Child对象,当然template属性已经被替换为编译后的render函数。


图片描述

不手动调用Vue.extend的话导出对象中不会包含_Ctor属性的,方便把webpack的导出配置列一下么,看看是否直接是.vue文件,如果是其他.js的话有没有在其中手动调用过Vue.extend等等……

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题