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_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
}
}
);
}
}
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> 
