起步

Vue CLI

如果你不想手动设置 webpack,我们推荐使用 Vue CLI 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会针对多数常见的开发需求进行预先配置,做到开箱即用。

如果 Vue CLI 提供的内建没有满足你的需求,或者你乐于从零开始创建你自己的 webpack 配置,那么请继续阅读这篇指南。

手动配置

Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外,请确保在你的 webpack 配置中添加 Vue Loader 的插件:

  1. // webpack.config.js
  2. const VueLoaderPlugin = require('vue-loader/lib/plugin')
  3. module.exports = {
  4. module: {
  5. rules: [
  6. // ... 其它规则
  7. {
  8. test: /\.vue$/,
  9. loader: 'vue-loader'
  10. }
  11. ]
  12. },
  13. plugins: [
  14. // 请确保引入这个插件!
  15. new VueLoaderPlugin()
  16. ]
  17. }

这个插件是必须的! 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如,如果你有一条匹配 /.js$/ 的规则,那么它会应用到 .vue 文件里的 <script> 块。

一个更完整的 webpack 配置示例看起来像这样:

  1. // webpack.config.js
  2. const path = require('path')
  3. const VueLoaderPlugin = require('vue-loader/lib/plugin')
  4. module.exports = {
  5. mode: 'development',
  6. module: {
  7. rules: [
  8. {
  9. test: /\.vue$/,
  10. loader: 'vue-loader'
  11. },
  12. // 它会应用到普通的 `.js` 文件
  13. // 以及 `.vue` 文件中的 `<script>` 块
  14. {
  15. test: /\.js$/,
  16. loader: 'babel-loader'
  17. },
  18. // 它会应用到普通的 `.css` 文件
  19. // 以及 `.vue` 文件中的 `<style>` 块
  20. {
  21. test: /\.css$/,
  22. use: [
  23. 'vue-style-loader',
  24. 'css-loader'
  25. ]
  26. }
  27. ]
  28. },
  29. plugins: [
  30. // 请确保引入这个插件来施展魔法
  31. new VueLoaderPlugin()
  32. ]
  33. }

你也可以在选项参考查阅所有可用的 loader 选项。

原文: https://vue-loader.vuejs.org/zh/guide/#vue-cli