問題描述

用了 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的配置