起步

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')
  4. module.exports = {
  5.   module: {
  6.     rules: [
  7.       // ... 其它规则
  8.       {
  9.         test: /\.vue$/,
  10.         loader: 'vue-loader'
  11.       }
  12.     ]
  13.   },
  14.   plugins: [
  15.     // 请确保引入这个插件！
  16.     new VueLoaderPlugin()
  17.   ]
  18. }

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

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

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

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

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