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

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)
    }