vue.js - VUE2打包文件时出错

问题描述

问 题

我在运行npm run build后出现了如下错误：

> jtools@1.0.0 build /Users/jathon/node_modules/jtools
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: 1d3084405e66a0c07dd9                                                         
Version: webpack 2.5.1
Time: 1347ms
     Asset    Size  Chunks                    Chunk Names
    app.js  323 kB       0  [emitted]  [big]  main
app.js.map  405 kB       0  [emitted]         main

ERROR in app.js from UglifyJs
Unexpected token punc «}», expected punc «:» [app.js:12423,0]

npm ERR! Darwin 16.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.10.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! jtools@1.0.0 build: `cross-env NODE_ENV=production webpack --progress --hide-modules`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the jtools@1.0.0 build script 'cross-env NODE_ENV=production webpack --progress --hide-modules'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the jtools package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     cross-env NODE_ENV=production webpack --progress --hide-modules
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs jtools
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls jtools
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/jathon/node_modules/jtools/npm-debug.log

弄了一天都没解决，我查看了生成的app.js，发现babel-loader没有将ES6语法转换成ES5，不知道会不会是这个问题导致，请各位大神帮我指点一下，下面是我相关配置文件的信息。
package.json

{
  "name": "jtools",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "jathon",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-loose": "^8.0.0",
    "babel-preset-latest": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "cross-env": "^5.0.0",
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "uglify-js": "^2.8.24",
    "vue": "^2.2.1",
    "vue-loader": "^12.0.4",
    "vue-route": "^1.5.1"
  },
  "devDependencies": {
    "file-loader": "^0.9.0",
    "less": "^2.7.2",
    "less-loader": "^4.0.3",
    "node-sass": "^4.5.0",
    "sass-loader": "^5.0.1",
    "style-loader": "^0.17.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

webpack.config.js

var path = require('path')
var webpack = require('webpack')

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'app.js'
  },
  module: {
    rules: [
      {
        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/,
         query: { presets: ['es2015']}
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
          test: /\.less$/,
          loader: 'style-loader!css-loader!less-loader'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'build.min.css',
      allChunks: true,
    })
  ],
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: false,
      comments: false,
      mangle:false,
      compress: {
        warnings: false,
        drop_console: true
      },
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'

//require('./styles/app.css')

Vue.use(VueRouter)

import App from './components/main.vue'



const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能


new Vue(Vue.util.extend({ router }, App)).$mount('#app')

解决方案

试了几天，终于找到原因了，原来上级目录是node_modules会导致文件打包失败，移动到其他目录就可以了。。。呵呵。。。

这篇关于vue.js - VUE2打包文件时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！