当我使用@更改导入路径时，字段“browser”不包含有效的别名配置

Question

当我将Vue组件的导入方式从以下方式更改为：

import Options from './components/Translator.vue'

to:

import Options from '@/popup/components/Translator.vue'

显示错误：

ERROR in ./src/popup/App.vue?vue&type=script&lang=ts (./node_modules/ts-loader/index.js??clonedRuleSet-1!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[8].use[0]!./src/popup/App.vue?vue&type=script&lang=ts) 3:0-67
Module not found: Error: Can't resolve '@/public/widget/translator/Translator.vue' in '/Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup'
resolve '@/public/widget/translator/Translator.vue' in '/Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup'
  Parsed request is a module
  using description file: /Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/package.json (relative path: ./src/popup)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/src/popup/node_modules doesn't exist or is not a directory
      /Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/src/node_modules doesn't exist or is not a directory
      looking for modules in /Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/node_modules
        /Users/xxx/source/reddwarf/frontend/reddwaf-translate-plugin/node_modules/@/public doesn't exist
      /Users/xxx/source/reddwarf/frontend/node_modules doesn't exist or is not a directory
      /Users/xxx/source/reddwarf/node_modules doesn't exist or is not a directory
      /Users/xxx/source/node_modules doesn't exist or is not a directory
      /Users/xxx/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./src/popup/App.vue?vue&type=script&lang=ts 1:0-189 1:0-189 1:190-368 1:190-368
 @ ./src/popup/App.vue 2:0-54 3:0-49 3:0-49 8:49-55
 @ ./src/popup/index.ts 2:0-28 4:14-17

webpack 5.67.0 compiled with 1 error in 116 ms

浏览器在哪里？我搜索了整个项目，但没有找到它。为什么要设置浏览器别名？我该怎么做才能避免这个问题？这是webpack 5.x的别名配置：

resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    alias: {
        // https://dev59.com/8Kzka4cB1Zd3GeqP3BV0
        vue: 'vue/dist/vue.esm-bundler.js',
        '@': path.resolve(__dirname, 'src'),
    },
  },

今天我再次遇到同样的问题，然后像这样调整配置：

resolve: {
      extensions: ['.tsx', '.ts', '.js'],
      alias: {
          vue: 'vue/dist/vue.esm-bundler.js',
          process: 'process/browser',
          @: path.resolve(__dirname, 'src'),
      },
    },

还是一点作用没有。这是我的完整webpack配置：

  const path = require('path');
  const webpack = require( 'webpack' );
  const MiniCssExtractPlugin = require( 'mini-css-extract-plugin');
  const HtmlWebpackPlugin = require( 'html-webpack-plugin');
  const CopyPlugin = require("copy-webpack-plugin");
  const { VueLoaderPlugin } = require("vue-loader");

  module.exports = {
    entry : {
      'popup/popup' : './src/popup/',
      'background/background': './src/background' 
    } ,
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
      alias: {
          vue: 'vue/dist/vue.esm-bundler.js',
          process: 'process/browser',
          '@': path.resolve(__dirname, 'src'),
      },
    },
    output : {
      path : path.resolve(__dirname, '../../bundle') ,
      filename : '[name].js'
    },
    module : {
      rules : [
        {
          test: /\.ts$/,
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/]
          },
          exclude: /node_modules|\.d\.ts$/
        },
        {
          test: /\.d\.ts$/,
          loader: 'ignore-loader'
        },
        {
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        {
          test : /\.js$/ ,
          exclude : [ /node_modules(?!(\/|\\?\\)(translation\.js|selection-widget|connect\.io|chrome-env)\1)/ ] ,
          loader : 'babel-loader'
        } ,
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
        {
          test : /\.(scss)$/ ,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        }
      ]
    },
    plugins : [
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
      new VueLoaderPlugin(),
      new CopyPlugin({
        patterns: [
          { from: "src/manifest.json", to: "manifest.json" },
          { from: "src/resource/image", to: "resource/image" },
        ],
      }),
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css",
      }),
      new HtmlWebpackPlugin({
        filename: 'popup/popup.html',
        template: 'src/popup/index.html'
      }),
      new webpack.DefinePlugin({
        __VUE_OPTIONS_API__: false,
        __VUE_PROD_DEVTOOLS__: false,
      }),
    ]
  };

- Dolphin

Answer 1

  '@': path.resolve(__dirname, 'src'),

我认为别名不应该是字符串。

  @: path.resolve(__dirname, 'src'),

https://webpack.js.org/configuration/resolve/

- Yilmaz

---

我尝试了你的方法，但好像没用。@Yilmaz 在 Visual Studio Code 中检查时，@ 必须有一对 ''。 - Dolphin

Answer 2

尝试使用一些基于组件的名称，而不是使用@作为别名名称。这可能会对您有所帮助。

- Gowtham Ganapathi