Vuejs 모듈 없음 오류 웹 팩을 사용하여 '@/구성 요소/ 오류를 해결할 수 없음

Vuejs 모듈 없음 오류 웹 팩을 사용하여 '@/구성 요소/ 오류를 해결할 수 없음

나는 이것에 대한 해답을 찾을 수 없다. 분명히 그것은 웹팩 구성과 관련이 있다. 내가 전혀 알지 못하는 것이다.

웹 팩-단순 템플릿 실행 @/구성 요소/를 실행하는 다음 방법을 앱 디렉토리에 사용하고 싶지만, 내게는 오류만 발생함

모듈을 찾을 수 없음 오류 '@/message/ 오류'를 해결할 수 없음

내가 읽은 내용 중에 웹팩 구성에서 이 작업을 하기 위해 설정해야 할 것이 있는데, 그게 뭔지 모르겠는데, 누가 좀 도와주시겠습니까?

지금 나는 이것을 개발 서버에서 시도하고 있지만 분명히 그것이 또한 생산에서 실패하게 만들기를 간절히 원한다.

나는 내가 하고 싶은 일을 한다고 생각하지만, 내가 이 웹팩을 전에 사용하지 않았던 것처럼 어떻게 작동시킬지 모르는 js코드를 발견했다.

고마워요.

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

고마워요.

나는 이 템플릿을 사용한다: 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)
    }

내가 웹팩으로 하는 유일한 일은 @가 js 루트 디렉토리를 가리키도록 별칭을 만드는 것이다.이렇게 하면 파일을 가져올 때 상대 경로가 필요하지 않다.webpack.mix.js에 다음 코드를 추가하십시오.

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

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

나도 같은 실수를 했다.@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()기능은 내가 이 오류를 피할 수 있도록 도와주었다.

참조URL: https://stackoverflow.com/questions/50275016/vuejs-module-not-found-error-cant-resolve-components-error-using-webpack