使用UglifyJs时出现webpack build xxx.vue错误

我使用webpack构建vue并使用UglifyJs，但其错误在于：

ERROR in index.js from UglifyJs
SyntaxError: Unexpected token punc «(», expected punc «:» [index.js:386,6]

"dependencies": {
    "autoprefixer": "^6.6.1",
    "babel": "^6.5.2",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-2": "^6.18.0",
    "cross-env": "^3.1.4",
    "css-loader": "^0.26.1",
    "html-loader": "^0.4.4",
    "sass-loader": "^4.1.1",
    "url-loader": "^0.5.7",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^10.0.2",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^2.1.0-beta.25",
    "webpack-dev-server": "^2.1.0-beta.9",
    "vue": "^2.1.8"
}

hello.vue代码如下：

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        babel: {
            babelrc: false,
            presets: ['es2015', "stage-2"],
            plugins: ['babel-plugin-transform-runtime']
        }
}
...

new webpack.optimize.UglifyJsPlugin({
    sourceMap: false,
    mangle: false,
    compress: {
        warnings: false
        drop_console: true
    }
})

/* harmony default export */ exports["default"] = {
  name: 'app',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  }
};

test: /\.js$/, 
loader: 'babel-loader', 
options: {
    plugins: ['transform-runtime', 'transform-object-rest-spread'],
    presets: ['es2015']
}

此文件的package.json代码：

"dependencies": {
    "autoprefixer": "^6.6.1",
    "babel": "^6.5.2",
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-2": "^6.18.0",
    "cross-env": "^3.1.4",
    "css-loader": "^0.26.1",
    "html-loader": "^0.4.4",
    "sass-loader": "^4.1.1",
    "url-loader": "^0.5.7",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^10.0.2",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^2.1.0-beta.25",
    "webpack-dev-server": "^2.1.0-beta.9",
    "vue": "^2.1.8"
}

生成后，代码如下所示：

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        babel: {
            babelrc: false,
            presets: ['es2015', "stage-2"],
            plugins: ['babel-plugin-transform-runtime']
        }
}
...

new webpack.optimize.UglifyJsPlugin({
    sourceMap: false,
    mangle: false,
    compress: {
        warnings: false
        drop_console: true
    }
})

/* harmony default export */ exports["default"] = {
  name: 'app',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  }
};

test: /\.js$/, 
loader: 'babel-loader', 
options: {
    plugins: ['transform-runtime', 'transform-object-rest-spread'],
    presets: ['es2015']
}

我在构建后发现，

hellow.vue

文件到

index.js

，它的代码ES6不到ES5，所以UglifyJs是错误的。 我尝试了所有的方法，但都失败了。

---

请帮帮我，谢谢。

我刚刚自己解决了这个问题。要将babel应用于

.vue

文件，您不能在

webpack.config.js

中指定babel选项，而是在

.babelrc

文件中指定

1） 完全从

vue加载程序中删除
options
属性，使其看起来像这样：

{
  test: /\.vue$/,
  loader: 'vue-loader'
}

{
  "presets": [
    ["es2015"],
    ["stage-2"]
  ],
  "plugins": ["babel-plugin-transform-runtime"],
  "comments": false
}

2） 在项目根目录中创建一个
.babelrc
文件（位于
package.json
和
webpack.config.js
）并包含以下内容：

{
  test: /\.vue$/,
  loader: 'vue-loader'
}

{
  "presets": [
    ["es2015"],
    ["stage-2"]
  ],
  "plugins": ["babel-plugin-transform-runtime"],
  "comments": false
}

但要注意：这是一个文件，不是普通的JSON文件或JavaScript文件


我不确定您的
options.babel:{}
方法是否有效，但官方vue cli模板使用了
.babelrc
方法，它也适用于我的自定义设置。
我遇到了同样的问题，我不想实现
.babelrc

首先，您的网页配置的格式不是vue loader所识别的格式：

test: /\.vue$/,
loader: 'vue-loader',
options: {
    babel: {
        babelrc: false,
        presets: ['es2015', "stage-2"],
        plugins: ['babel-plugin-transform-runtime']
    }
}

在阅读之后，我使用了以下内容：

test: /\.vue$/, 
loader: 'vue-loader', 
options: {
    loaders: {
        js: 'babel-loader'
    }
}

我读到vue加载器检测到巴贝尔加载器，所以我认为它会检测到相同的配置，不幸的是没有。我的
babel loader
如下所示：

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        babel: {
            babelrc: false,
            presets: ['es2015', "stage-2"],
            plugins: ['babel-plugin-transform-runtime']
        }
}
...

new webpack.optimize.UglifyJsPlugin({
    sourceMap: false,
    mangle: false,
    compress: {
        warnings: false
        drop_console: true
    }
})

/* harmony default export */ exports["default"] = {
  name: 'app',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  }
};

test: /\.js$/, 
loader: 'babel-loader', 
options: {
    plugins: ['transform-runtime', 'transform-object-rest-spread'],
    presets: ['es2015']
}

除了通过字符串之外，我没有办法指定加载器。所以我尝试了Webpack1.x字符串选项格式，它成功了！：

test: /\.vue$/, 
loader: 'vue-loader', 
options: {
    loaders: {
        js: 'babel-loader?presets[]=es2015&plugins[]=transform-runtime'
    }
}

简单。非常感谢。