如何在网页中使用快捷路径“@”？

Question

我用我的软件包做了“npm运行构建”。json。我听到了这个消息。如何将@与网页包一起使用？

错误/节点\模块/babel加载程序/lib/节点_模块/vue加载程序/lib/selector。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",
  ...
},
...

用这个包裹。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

通常被称为ES6装饰器的特殊@符号可以使用babel transform插件在您的任意一个应用程序中添加。babelrc文件或网页包babel加载程序选项。我建议在生产中使用transform decorators legacy。

将插件安装到开发人员依赖项中。

npm安装--保存dev babel插件转换装饰器的旧版

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

。babelrc

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

webpack.config.jsBabel-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。配置。jsvue加载程序选项

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']
      }
    }),
  ]
}

装饰器仍然是相当新的，这就是为什么它目前在最稳定的预设中不可用的原因。

Answer 2

若要将“@”用作路径根，您需要在网页中添加“解析”部分。配置。js，如果您使用的是标准vue cli创建的项目（或将“src”指向组件所在的源根目录）：

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