webpack中Module not found: Error: Can‘t resolve ‘@/pages/home.vue‘ in ‘/Users/Documents/react

在使用 webpack 进行 vue 项目搭建时，引入vue组件时出现了 Module not found 的问题。

以前使用 vue-cli 脚手架帮我们配置好了 webpack 的配置。现在需要我们自己配置。

先配置 webpack 中的 alias ：

module.exports = {
    
    
	  resolve: {
    
    
    // 以下配置会将没指定拓展名的文件按如下类型查找匹配
    extensions: ["*", ".js", ".vue"],
    // 设置别名
    alias: {
    
    
      "@": path.resolve(__dirname, "../src"), // 这样配置后 @ 可以指向 src 目录
    },
  },
}

注意 …/src 这个路径要根据自己的目录来配置。 __dirname是当前文件的绝对路径，…/src是相对于当前文件的相对路径。

extensions: ["*", “.js”, “.vue”] 作用是，我们在引入.vue后缀的文件时，可以不添加文件的后缀名了。

比如：

import home from "@/pages/home.vue";

我们可以写成：

import home from "@/pages/home";

webpack会根据 extension 配置的 ["*", “.js”, “.vue”] 顺序依次匹配相对应的文件。