javascript - 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的结果是

解决方案

vue-loader做的事只是把.vue文件中的template与style编译到.js（编译到render函数），并混合到你在.vue中export出来的Object中。

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

---

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

---

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

这篇关于javascript - vue-loader是如何将.vue格式文件转换为组件的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！