时间戳

首页 > 解决方案 > Vuejs 模块未找到错误无法使用 webpack 解决 '@/components/ 错误

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

问题描述

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

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

找不到模块错误无法解决'@/components/错误

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

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

我找到了这个 js 代码，我认为它可以满足我的需求，但不知道如何在 webpack 设置下使其工作，因为以前从未使用过它

谢谢

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

谢谢

标签： webpackvuejs2

解决方案

我使用这个模板：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)
    }

推荐阅读