javascript - webpack2.0打包的vue2.0项目无法解析ES6？

问题描述

用了 vuex和vue-router 现在babel好像处理vue文件吗 现在的项目IE11不能打开

/* 2017-04-13 webpack_Demo */var webpack = require(’webpack’);var path = require(’path’);var glob = require(’glob’);var vue = require(’vue-loader’)var HtmlWebpackPlugin = require(’html-webpack-plugin’);var Merge = require(’webpack-merge’);var ExtractTextPlugin = require(’extract-text-webpack-plugin’); var public_PATHS = { node_modules_Path: path.resolve(’./node_modules’), public_resource_Path: path.resolve(process.cwd(), ’./src/public_resource’), vendor_Path: path.resolve(process.cwd(), ’./src/public_resource/vendor’),}; var entry_config = { index:[’./src/main.js’], //单页面入口文件 common:[’jquery’,’vue’,’common_tools’,’store’] }; var output_config = { path: __dirname+’/build/’, filename: ’js/[name].js’};var module_config ={ loaders: [//css 文件使用 style-loader 和 css-loader 来处理{ test:/.css$/, loader:’style-loader!css-loader’ },//在webpack的module部分的loaders里进行配置即可{ test: /.js$/, exclude: /node_modules|vendor/, include:path.resolve(__dirname, ’./src/’), loader: ’babel-loader’,},{ test:/.html$/, loader:’html-loader’},{ test: /.vue$/, loader: ’vue-loader’},{ test: /.(png|gif|jpe?g)$/, loader: ’url-loader?limit=20000&name=./img/[name][hash].[ext]’ } ]}var plugins_config = [ //warming: this is a Array multips pages web_application need to push htmlwebpackplugin_config_Arraynew HtmlWebpackPlugin({filename: __dirname+’/build/index.html’, //生成的html存放路径，相对于pathtemplate: path.resolve(__dirname, ’./src/index.html’), //html模板路径 }), new webpack.ProvidePlugin({$: ’jquery’,jQuery: ’jquery’,’window.jQuery’: ’jquery’,’window.$’: ’jquery’ }), new webpack.optimize.CommonsChunkPlugin({name: ’common’,filename: './common/common.js',minChunks: Infinity //仅仅创建公共组件块，不会把任何modules打包进去。并且提供function，以便于自定义逻辑。 })];var resolve_config = { extensions: [’.js’,’.vue’, ’.css’, ’.less’, ’.ejs’, ’.png’, ’.jpg’,’.gif’,’.html’], //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名alias: {jquery: path.join(public_PATHS.vendor_Path, '/jquery-1.10.2.min.js'),basecss:path.join(public_PATHS.public_resource_Path, 'styles/base.css'),fullpage:path.join(public_PATHS.vendor_Path, '/jquery.fullPage.min.js'),pagination:path.join(public_PATHS.vendor_Path, '/jquery.pagination.min.js'),common_tools:path.join(public_PATHS.vendor_Path, '/common_tools.js'),store:path.join(public_PATHS.public_resource_Path, 'state/store.js') } //模块别名定义，方便后续直接引用别名，无须多写长长的地址 };var webpack_config = { entry:entry_config, output: output_config, module:module_config, plugins:plugins_config, resolve:resolve_config, devtool:’source-map’};module.exports = webpack_config;//common function///** * 获得路径 * @param globPath: str * @param pathDir: str 对比路径 * @returns obj */function getEntry(globPath, pathDir) { //get from github code var files = glob.sync(globPath); var entries = {},entry,//文件dirname, //basename, //文件名pathname, //extname; //文件扩展名 for (var i = 0; i < files.length; i++) {entry = files[i];dirname = path.dirname(entry); //返回路径中代表文件夹的部分//console.log('dirname返回路径中代表文件夹的部分:==>'+dirname);extname = path.extname(entry); //返回路径中文件的后缀名，即路径中最后一个’.’之后的部分。如果一个路径中并不包含’.’或该路径只包含一个’.’ 且这个’.’为路径的第一个字符，则此命令返回空字符串。//console.log('extname返回路径中文件的后缀名:==>'+extname);basename = path.basename(entry, extname); //返回路径中的最后一部分//console.log('basename返回路径中的最后一部分:==>'+basename);pathname = path.normalize(path.join(dirname, basename)); //规范化路径//console.log('pathname规范化路径:==>'+pathname);pathDir = path.normalize(pathDir); //规范化路径//console.log('pathDir规范化路径:==>'+pathDir);if(pathname.startsWith(pathDir)){ pathname = pathname.substring(pathDir.length); //console.log('pathname判断后:==>'+pathname); };entries[pathname] = ’./’ + entry; } //console.log(entries); return entries;}/* build dev-server */var npm_run_type = process.env.npm_lifecycle_event; //get npm run type stringconsole.log('npm_run_type==>'+npm_run_type);var debug, // is debug devServer, // is hrm mode minimize; // is minimizeif (npm_run_type == 'build') { // online mode （线上模式） debug = false, devServer = false, minimize = true;}else if (npm_run_type == 'build-dev') { // dev mode （开发模式） debug = true, devServer = false, minimize = false;} else if (npm_run_type == 'dev-hrm') { // dev HRM mode （热更新模式） debug = true, devServer = true, minimize = false;};/* * Hrm setting * （开启热更新，并自动打开浏览器） * */if (devServer) { console.log('port:'+devServer); var webpackHot=’webpack/hot/dev-server’; config = Merge(config,{ plugins: [// Enable multi-pass compilation for enhanced performance// in larger projects. Good default.new webpack.HotModuleReplacementPlugin({ multiStep: true}) ], devServer: {contentBase: __dirname+’//’,// Enable history API fallback so HTML5 History API based// routing works. This is a good default that will come// in handy in more complicated setups.historyApiFallback: true,// Unlike the cli flag, this doesn’t set// HotModuleReplacementPlugin!hot: true,inline: true,// Display only errors to reduce the amount of output.stats: ’errors-only’,host:’localhost’, port: 3100 }} );}}

vue：

<template> <header id=’header’><component v-bind:is='component' v-on:alert_emit='alert_emit' :alert_options=’alert_options’></component> <p class=’suateam suateam_headerframe’> <p class=’suateam_logo_frame’><router-link to=’/index’><img class =’suateam_logo_img’ v-bind:src=’logo’></router-link> </p> <p class=’suateam_main_nav_frame’><ul class=’main_nav_ul’> <li class=’main_nav_li’ v-for=’items in main_navArray’><router-link v-bind:to=’items.link’>{{items.name}}</router-link></li></ul> </p> <p class=’suateam_moudle_frame’> <p class=’suateam_moudle’> <i class=’suateam_moudle_icon search’></i> </p> <p class=’suateam_moudle’> <i class=’suateam_moudle_icon user’ v-on:click=’user_menu_switch($event)’></i> <p class=’suateam_menu’ name=’user_menu_frame’ style='z-index: 999'> <ul> <li class=’suateam_menu_li’ v-for=’items in user_menu_loginout’ v-if=’islogin==false’> <router-link v-bind:to=’items.link’><span v-on:click=’user_menu_switch()’>{{items.name}}</span></router-link> </li> <li class=’suateam_menu_li’ v-for=’items in user_menu_login’ v-if=’islogin==true’> <router-link v-bind:to=’items.link’><span v-on:click=’user_menu_switch(items.ftn)’>{{items.name}}</span></router-link> </li> </ul> </p> </p> <p class=’suateam_moudle’> <i class=’suateam_moudle_icon help’ v-on:click=’help_menu_switch($event)’></i> <p class=’suateam_menu’ name=’help_menu_frame’> <ul> <li class=’suateam_menu_li’ v-for=’items in help_menu’> <router-link v-bind:to=’items.link’><span v-on:click=’help_menu_switch()’>{{items.name}}</span></router-link> </li> </ul> </p> </p> </p></p> </header> </template><script> //import store from 'store'; var common_tools=require('common_tools'); import Alert from ’../../components/global/alert’; export default {components: {Alert},name:’header’,computed: { islogin () { return this.$store.state.islogin; }},data: function () { return {main_navArray: [ {link:’/scheme’,name:’安全方案’}, {link:’/buy’,name:’单品汇’}, {link:’/lease’,name:’产品租赁’}, {link:’/service’,name:’全息服务’}, {link:’/safecommunity’,name:’安全社区’}, {link:’/marketingpartner’,name:’市场合作’}, {link:’/aboutus’,name:’关于我们’}],logo:require(’../../public_resource/img/ico/logo.png’),user_menu_loginout:[{link:’/login’,name:’登录’},{link:’/register’,name:’注册’},{link:’/orderlist’,name:’订单管理’}],user_menu_login:[{link:’/usercenter’,name:’个人中心’},{link:’/orderlist’,name:’订单管理’},{link:’#’,name:’退出’,ftn:1}],help_menu:[{link:’/helpcenter/online’,name:’在线客服’},{link:’/helpcenter/advice’,name:’意见反馈’},{link:’/helpcenter/center’,name:’帮助中心’}],user_menu_switch_state:false,help_menu_switch_state:false,component:’’,alert_options:[’’,’’], //[’标题’，’内容’] }},methods:{ Alert:function(_title,_content){common_tools.Shade_on(’app’);this.alert_options=[_title,_content];this.component=Alert; }, alert_emit:function(_val){common_tools.Shade_off();this.component=’’;window.location.reload(); }, search:function(){ }, user_menu_switch:function(_val){var _self = this;if(_val==1){ //退出登录 common_tools.AJAX(’POST’,common_tools.interfaceurl+’login/memberLogout’,{ },function(data){ //success callback if(data.rspCode!==’100000’){ console.log(data) }else if(data.rspCode==’100000’){ sessionStorage.clear(); _self.$store.commit(’userisloginout’); _self.Alert(’登出成功’,’登出成功’); }; },function(data){ //error callback _self.Alert(’登出成功’,data.rspMsg); console.log(data); }); }if(this.user_menu_switch_state==false){ $('p.suateam_menu[name=’user_menu_frame’]').fadeIn(); this.user_menu_switch_state=true;}else if(this.user_menu_switch_state==true){ $('p.suateam_menu[name=’user_menu_frame’]').fadeOut(); this.user_menu_switch_state=false;}; }, help_menu_switch:function(){if(this.help_menu_switch_state==false){ $('p.suateam_menu[name=’help_menu_frame’]').fadeIn(); this.help_menu_switch_state=true;}else if(this.help_menu_switch_state==true){ $('p.suateam_menu[name=’help_menu_frame’]').fadeOut(); this.help_menu_switch_state=false;} }} }</script><style>p.suateam_headerframe{ box-sizing: border-box; margin: 0 auto; display: block; width: 100%; height: 100px;}p.suateam_logo_frame{ width: 120px; height: 50px; margin: 25px auto; display: block; float: left; box-sizing: border-box;}img.suateam_logo_img{ width: 113px; height: 34px; margin: 8px 0;}p.suateam_main_nav_frame{ width: 800px; box-sizing: border-box; margin: 0 0 0 -520px; position: relative; left: 50%; display: block; color: #fff; float: left;}p.suateam_main_nav_frame ul.main_nav_ul{ width: 100%; display: table;}p.suateam_main_nav_frame li.main_nav_li{ width: 10%; margin: 0 2.1%; float: left; line-height: 100px; font-size: 1.7rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}p.suateam_main_nav_frame li.main_nav_li a{ color: #fff;}p.suateam_moudle_frame{ float: right; height:50px ; width: 162px; margin: 25px 0; position: relative;}p.suateam_moudle{ position: relative; display: block; float: left; width: 34px; height: 34px; margin: 8px 10px; box-sizing: border-box;}p.suateam_menu{ background:#fff; width: 120px; min-height: 50px; box-shadow: 1px 1px 10px #999; position: absolute; top: 60px; left: -45px; display: none;}p.suateam_menu:before{ position: absolute; left: 50%; content: ’’; margin-left: -15px; top: -15px; width: 30px; height: 30px; background-image: url(../../public_resource/img/ico/menu_arrow.png) ; background-size: 100% 100%;}p.suateam_menu li.suateam_menu_li{ height: 50px; line-height: 50px; border-bottom: 1px solid #ededed; text-align: center; font-size: 1.4rem; width: 90%; margin: 0 5%;}p.suateam_menu li.suateam_menu_li span{ color: #000000;}i.suateam_moudle_icon{ height:34px; width: 34px; display: block; float: left; cursor: pointer;}i.suateam_moudle_icon.search{ background-image:url(../../public_resource/img/ico/search.png) ;}i.suateam_moudle_icon.user{ background-image:url(../../public_resource/img/ico/user.png) ;}i.suateam_moudle_icon.help{ background-image:url(../../public_resource/img/ico/help.png) ;}</style>

问题解答

很想吐槽这种下划线的写法，不过重点不是这个

你用的是官方脚手架搭建的项目么，如果是的话应该是使用了落后的babel版本npm装一个babel stage-0版本应该可以

另外，语法解析错误应该提供的是package.json的配置