Question

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

错误 ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector。 js？type = script＆amp; 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?typ e = script＆amp; 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

使用＆＃39; @＆＃39;作为路径根，您需要在webpack.config.js中添加resolve部分，如果您使用的是标准的vue cli创建的项目（或者指向您的源根目录，那么您的组件是）：

＆＃13;

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

＆＃13;

如果你正在使用vue-cli 3，那么@已经设置为引用src（参见：https://github.com/vuejs/vue-cli/blob/ff57b8f55fa69873f643e418cfe6d4842d7c7674/packages/%40vue/cli-service/lib/config/base.js#L49-L50），这样就可以在没有配置更改的情况下使用。

Answer 2

可以使用.babelrc文件或webpack babel-loader选项中的babel变换插件添加通常称为ES6装饰器的特殊@符号。我建议在制作中使用transform-decorators-legacy。

将插件安装到您的dev依赖项。

npm install --save-dev babel-plugin-transform-decorators-legacy

使用.babelrc或webpack.config.js进行配置。如果您使用的是vue-loader，我认为需要使用webpack配置。

.babelrc

{
  "presets": [
    "babel-preset-env"
  ],
  "plugins": [
    "babel-plugin-transform-decorators-legacy"
  ]
}

webpack.config.js babel-loader选项

{
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            query: {
              babelrc: false,
              presets: [
                'babel-preset-env'
              ],
              plugins: [
                'babel-plugin-transform-decorators-legacy'
              ]
            }
          }
        ]
      }
    ]
  }
}

webpack.config.js vue-loader选项

const VueLoaderOptionsPlugin = require('vue-loader-options-plugin');
module.exports = {
  // ... other config
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            js: 'babel-loader', // additional loaders here
          }
        }
      }
      // ... other rule
    ]
  },
  plugins: [
    new VueLoaderOptionsPlugin({
      babel: { // options for babel-loader
        presets: ['babel-preset-env'],
        plugins: ['babel-plugin-transform-decorators-legacy']
      }
    }),
  ]
}

装饰器仍然相当新，这就是为什么目前大多数稳定的预设都没有。

如何在webpack中使用快捷方式“@”？

2 个答案: