如何使用快捷路径“@"?在 webpack 中? [英] How can I use shortcut path "@" in webpack?

问题描述

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

I did "npm run build" with my package.json. And I catched this message. How can I use @ with webpack?

错误在./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 模块未找到:错误:不能解析C:\Users\ctc\"中的@/components/CompHoge"下载\vue-navbar\src' @./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 11:0-45 @ ./src/App.vue @./src/main.js

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:

But in "npm run dev", it succeed. my 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，它就成功了.:

With this package.json, it succeed.:

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

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

Feb 6. Added my 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/
      },
...

推荐答案

要使用 '@' 作为路径根，需要在 webpack.config.js 中添加 resolve 部分，如果你使用的是标准 vuecli 创建的项目(或将src"指向组件所在的源根目录):

To use '@' as a path root, you need to add the the resolve section in your webpack.config.js, if you are using the standard vue cli created project (or point 'src' to your source root where your components are):

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

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

If you are using vue-cli 3, then @ is already set up to reference src (see: https://github.com/vuejs/vue-cli/blob/ff57b8f55fa69873f643e418cfe6d4842d7c7674/packages/%40vue/cli-service/lib/config/base.js#L49-L50), so that can be used with no configuration changes.

这篇关于如何使用快捷路径“@"?在 webpack 中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！