javascript - projek vue2.0 yang dibungkus oleh webpack2.0 tidak boleh menghuraikan ES6?

Question

Saya menggunakan vuex dan vue-router Adakah babel nampaknya memproses fail vue sekarang?

/* 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_Array
    
    new HtmlWebpackPlugin({
        filename: __dirname+'/build/index.html', //生成的html存放路径，相对于path
        template: 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 string
console.log("npm_run_type==>"+npm_run_type);

var debug,          // is debug
    devServer,      // is hrm mode
    minimize;       // is minimize



if (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 
                      
            }
        }
    );
}
}

viu:

<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>    

Answer 1

Saya benar-benar ingin merungut tentang cara menulis garis bawah ini, tetapi bukan itu maksudnya

Adakah anda menggunakan projek yang dibina dengan perancah rasmi. Jika ya, ia sepatutnya menggunakan versi babel peringkat-0 dengan npm sepatutnya baik

Selain itu, ralat penghuraian sintaks harus menyediakan konfigurasi package.json