Vuejs 模块未找到错误无法使用 webpack 解决 '@/components/ 错误

Question

我找不到答案，除了显然它与 webpack 配置有关，我对此一无所知。

我想使用以下方式进入运行 webpack-simple 模板 @/components/ 的应用程序目录，但对我来说它只会产生错误

module not found error can't resolve '@/components/ error

从我所做的阅读中，我需要在 webpack 配置中设置一些东西才能使它工作，但我找不到它是什么，有人可以帮忙吗？

目前我在开发服务器中尝试这个，但显然很想确保它也能在生产中工作

我发现了这个 js 代码，我认为它可以满足我的需求，但不知道如何使用之前从未使用过的 webpack 设置来实现它

谢谢

{
  "compilerOptions": {
      "baseUrl": ".",
      "paths": {
          "@/*": [
              "src/*"
          ]
      }
  }
}

谢谢

Answer 1

我使用这个模板：https://github.com/vuejs-templates/webpack。

在已经创建的 webpack.base.conf 中，这是导出的配置对象的一部分（我包含的不仅仅是相关的上下文）：

    module.exports = {
      context: path.resolve(__dirname, '../'),
      entry: {
        app: './src/main.js',
      },
      plugins: [
        // make jquery available for all modules
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
        })
      ],
      output: {
        path: config.build.assetsRoot,
        filename: '[name].js',
        publicPath: process.env.NODE_ENV === 'production'
          ? config.build.assetsPublicPath
          : config.dev.assetsPublicPath
      },
      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },

这部分可能会对您有所帮助：

      resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': resolve('src'),
        }
      },

现在在我的导入中，我只写类似

    import myModule from '@/fileInSrcFolder';

其中@是根文件夹内的src文件夹。

为了补全，配置文件在根文件夹的一个文件夹中，解析函数如下所示：

    function resolve (dir) {
      return path.join(__dirname, '..', dir)
    }

Answer 2

我对 Webpack 所做的唯一事情就是创建一个别名，以便 @ 指向 js 根目录。这消除了导入文件时对相对路径的需求。将以下代码添加到 webpack.mix.js。

mix.webpackConfig({    
  resolve: {      
    alias: {
 @’: __dirname + '/resources/assets/js'      
    },    
  },  
})

https://medium.com/@sadnub/vuejs-and-laravel-api-part-2-711c4986281c

Answer 3

我有同样的错误。 @sebastian & @Mattias 帮助我找到了确切的解决方案。

我的配置是

const { VueLoaderPlugin } = require("vue-loader");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  mode: "development",
  entry: "./src/main.ts",
  target: "web",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    publicPath: "/",
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".vue", ".json"],
    alias: {
      "@/": path.resolve(__dirname, "src"),
      "@/vuex": path.resolve(__dirname, "src/vuex"),
    },
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        include: /src/,
        loader: "ts-loader",
        options: {
          transpileOnly: true,
          appendTsSuffixTo: [/\.vue$/],
        },
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {
            scss: "vue-style-loader!css-loader!sass-loader",
            sass: "vue-style-loader!css-loader!sass-loader?indentedSyntax",
          },
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.s[ac]ss$/i,
        use: ["vue-style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|svg|jpe?g|gif)$/i,
        loader: "file-loader",
        options: {
          outputPath: "assets",
        },
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
      filename: "index.html",
      favicon: "./public/favicon.ico",
    }),
    // make sure to include the plugin for the magic
  ],
  optimization: {
    moduleIds: "hashed",
    runtimeChunk: "single",
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          priority: -10,
          chunks: "all",
        },
      },
    },
  },
};

关注这部分

resolve: {
    extensions: [".ts", ".tsx", ".js", ".vue", ".json"],
    alias: {
      "@/": path.resolve(__dirname, "src"),
      "@/vuex": path.resolve(__dirname, "src/vuex"),
    },
  },

自定义的resolve 函数对我不起作用，但直接使用path.resolve() 函数帮助我避免了这个错误。