npm - 如何在 webpack 中使用快捷方式路径 "@"？

Question

我用我的 package.json 做了“npm run build”。 我收到了这条消息。 我如何在 webpack 中使用@？

ERROR in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector. js?type=script&index=0!./src/App.vue Module not found: Error: Can't resolve '@/components/CompHoge' in 'C:\Users\ctc\ Downloads\vue-navbar\src' @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?typ e=script&index=0!./src/App.vue 11:0-45 @ ./src/App.vue @ ./src/main.js

但是在“npm run dev”中，它成功了。 我的 package.json:

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  ...
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
  ...
},
...

有了这个package.json，就成功了。:

"build": "node build/build.js",

2 月 6 日。 添加了我的 webpack.config.js:

...
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
...

Answer 1

要使用“@”作为路径根，如果您使用的是标准 vue cli 创建的项目(或将“src”指向您的源根，则需要在 webpack.config.js 中添加解析部分你的组件是):

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

如果您使用的是 vue-cli 3，那么 @ 已经设置为引用 src(参见:https://github.com/vuejs/vue-cli/blob/ff57b8f55fa69873f643e418cfe6d4842d7c7674/packages/%40vue/cli-service/lib/config/base.js#L49-L50)，因此无需更改配置即可使用。