webpack 整合 vue 项目，出现 vue 文件不识别问题怎么解决？

介绍

Vue 是一个非常流行的前端框架，它提供了很多便捷的开发工具，比如 vue-cli。webpack 是一个模块打包工具，它可以将多个模块打包成一个文件，方便前端开发。在使用 vue-cli 创建项目时，会默认集成 webpack，但是有时候会出现 vue 文件不识别的问题，这是由于 webpack 对于 vue 文件默认不支持的原因。本文将介绍如何解决这个问题。

解决方法

安装依赖

在解决 vue 文件不识别问题之前，我们需要先安装一些依赖。

npm install vue-loader vue-template-compiler --save-dev

vue-loader 是一个 webpack 的 loader，用于加载 vue 文件。vue-template-compiler 是用于编译 vue 模板的编译器。这两个依赖是解决 vue 文件不识别问题的关键。

配置 webpack

在安装完依赖之后，我们需要对 webpack 进行配置。打开 webpack.config.js 文件，找到 module.exports 中的 rules 数组，在其中添加以下代码：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
    ],
  },
};

这段代码的意思是，对于以 .vue 结尾的文件，使用 vue-loader 进行加载。这样 webpack 就可以识别并加载 vue 文件了。

使用 vue-loader

在 webpack 配置完成之后，我们需要在项目中使用 vue-loader。在组件中引入 vue 文件时，需要在文件名后添加 !vue-loader。例如：

import HelloWorld from './components/HelloWorld.vue!vue-loader';

这样就可以成功加载 vue 文件了。

示例代码

完整的 webpack 配置代码如下：

// javascriptcn.com 代码示例
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],
};

在组件中引入 vue 文件时，需要在文件名后添加 !vue-loader。例如：

import HelloWorld from './components/HelloWorld.vue!vue-loader';

总结

使用 webpack 整合 vue 项目时，可能会出现 vue 文件不识别的问题。这是由于 webpack 默认不支持 vue 文件的原因。要解决这个问题，需要安装 vue-loader 和 vue-template-compiler 依赖，并在 webpack 配置中添加相应的 loader。在组件中引入 vue 文件时，需要在文件名后添加 !vue-loader。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e8d3895b1f8cacd7a9f34