介绍
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 数组，在其中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- ---------
------- -------------
--
--
--
--这段代码的意思是，对于以 .vue 结尾的文件，使用 vue-loader 进行加载。这样 webpack 就可以识别并加载 vue 文件了。
使用 vue-loader
在 webpack 配置完成之后，我们需要在项目中使用 vue-loader。在组件中引入 vue 文件时，需要在文件名后添加 !vue-loader。例如：
import HelloWorld from './components/HelloWorld.vue!vue-loader';
这样就可以成功加载 vue 文件了。
示例代码
完整的 webpack 配置代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
------ ----------------
------- -
----- ----------------------- ----------
--------- -----------
--
------- -
------ -
-
----- ---------
------- -------------
--
-
----- ---------
---- ---------------- --------------
--
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
--
--
--
-------- -
--- -------------------
--------- ---------------
---
--
--在组件中引入 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