airyland / vux-loader

hack into vue-loader

vux-loader

A webpack loader for processing .vue file before vue-loader

vux-loader's Issues

Nuxt.js 项目使用 vux，出现 "Unexpected token import" error

使用Nuxt构建项目的时候，同时使用vux会报错，目前有什么好的解决方法吗？

升级之后编译报错：Cannot read property 'replace' of undefined

vux-loader 版本： 1.1.19

之前一直正常，升级之后报错如下，有时间了希望看一下。

Module build failed: TypeError: Cannot read property 'replace' of undefined at /xxx/node_modules/vux-loader/src/libs/get-less-variables.js:51:28 at Array.forEach (<anonymous>) at getContent (/xxx/node_modules/vux-loader/src/libs/get-less-variables.js:21:28) at getLessVariables (/xxx/node_modules/vux-loader/src/libs/get-less-variables.js:6:10) at Object.module.exports (/xxx/node_modules/vux-loader/src/index.js:83:17)

vux-loader 是只支持webpack2么，webpack1里面直接报错

: Cannot define 'query' and multiple loaders in loaders list

webpack 3 依赖升级 警告

+-- [email protected]
| `-- UNMET PEER DEPENDENCY webpack@^1.3.0 || ^2 || ^2.1.0-beta || ^2.2.0-rc
`-- UNMET PEER DEPENDENCY [email protected]
  +-- [email protected]
  +-- [email protected]
  | `-- [email protected]
  +-- UNMET PEER DEPENDENCY [email protected]

swipeout-item缩不回来

swipeout-button 设置了宽度小于80 swipeout-item拉多了反弹回来还是80的位置

按官网文档升级出错

按官网升级了^2.1.0-rc.34版本，在webpack.base.conf.js中添加
const vuxLoader = require('vux-loader') module.exports = vuxLoader.merge(webpackConfig, { options: {}, plugins: [ { name: 'vux-ui' } ] }),
然而报错，出现index.js?5e94:2 Uncaught SyntaxError: Unexpected token import,不知道该如何解决，求解

datePick，以及在toast在部分浏览器中特别小，大小不适配

datePick，以及在toast在部分浏览器中特别小，大小不适配

使用了vux-loader后，在chrome上debug，查看到的.vue文件，每条语句前的空格都没有了

配置如下

module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui', 'progress-bar', 'duplicate-style', {
name: 'i18n',
vuxStaticReplace: false,
staticReplace: false,
extractToFiles: './src/locales/components.yml',
localeList: ['en', 'zh-CN']
}]
})
使用了vux-loader后，在chrome上debug，查看到的.vue文件，每条语句前的空格都没有了。但是js文件正常。

vux-loader的版本1.1.0。

例如，在chrome查看一个.vue文件：

import XButton from 'vux/src/components/x-button/index.vue'
import XHeader from 'vux/src/components/x-header/index.vue'

export default {
name: 'recoverpwd',
components: {
XButton,
XHeader
},
data () {
return {
msg: ''
}
},
methods: {
fetchData: function () {
let login = this.$route.params.login
this.msg = this.$t('msgAskAdminResetPassWithArg', {login: login})

},
Login: function () {
this.$router.push({ name: 'login' })
}
},
created: function () {
this.fetchData()
}
}

如果使用配置：
module.exports = webpackConfig
则在chrome短查看.vue文件的语句前面空格是被保留的。

vux如果不通过node_modules引用 而是直接放到项目里(自己做了些改写）这种情况下vux-loader要怎么配置使用呢

Webpack 3 + vux

Webpack 3 + vux时如何配置 plugins？？？？？？

fsevents

不知道哪个组件依赖了fsevents，间接依赖了 node-pre-gyp ，安装起来太麻烦了，根本下载不下来。

$t is not defined

一：我之前是好好的，今天 升级一下，就报错。
二：我项目从没使用过$t，还是报错
三：我把vux-loader升级过了，还是报错
四：我也清除了node_modules使用npm install重新安装，还是报错
请问如何解决

升级了一下版本，build时无反应

我之前用的是 1.0.44版本， build项目时没问题，也很快，升级到了 1.0.54，再build就不行了，webpack打包完就停在那里一动不动了

具体复现步骤

$ vue init agileago/webpack-mutiple test
$ cd test
$ yarn
$ yarn run vendor
$ yarn run dev
$ yarn run build

模板锁定了vux-loader的版本是1.0.44，所以一切没问题，但假如说升级一下版本就不能build了

$ yarn remove vux-loader
$ yarn add vux-loader
$ yarn run build

也不报错，就停在那里不动了

使用AjaxPlugin from 'vux'报错

我是个刚学vue的，使用import { AjaxPlugin } from 'vux';就报
vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件
我的vux-loader版本是最新版了，我用import flexbox from 'vux/src/components/flexbox/flexbox';能正常使用，我单独使用axios是可以的，代码为：
import Vue from 'vue';
import flexbox from 'vux/src/components/flexbox/flexbox';
import { AjaxPlugin } from 'vux';
import App from './App';
import router from './router';
Vue.use(flexbox);
console.log(flexbox);
Vue.use(AjaxPlugin);
控制台打印出来是：
VUX: 如果你看到这一行，说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大。请升级到最新版本 vux-loader，建议开启 eslint(standard)。
main.js?67d2:10 Object {name: "flexbox", props: Object, computed: Object, staticRenderFns: Array[0], __file: "G:\hebaodai\node_modules\vux\src\components\flexbox\flexbox.vue"…}_Ctor: Object__file: "G:\hebaodai\node_modules\vux\src\components\flexbox\flexbox.vue"beforeCreate: Array[1]beforeDestroy: Array[1]computed: Objectname: "flexbox"props: Objectrender: ()staticRenderFns: Array[0]proto: Object
index.vue?aa2d:85ReferenceError: AjaxPlugin is not defined(…)

vux-loader @1.0.68 自定义reset.css 无效

vux-loader @1.0.68 自定义reset.css 在 主App.vue中引用，样式 无效。

/* 引入Reset样式*/
@import "../css/reset.css";

1.0.63 可以正常使用

添加统一引入less(sass)变量功能报错

按照文档添加

{
  name: 'style-parser',
  fn: function (source) {
    return "@import '../style/style.scss'\n" + source
  }
}

到webpack.base.conf.js

报错

This dependency was not found in node_modules:
* -!./../node_modules/css-loader/index.js!../style/style.scss

我装了sass-loader 了，请问这个css-loader怎么加？我直接用 npm install css-loaser --save-dev 提示的是

i$ npm install --save-dev css-loader
[email protected] /Users/wiki/Documents/vueProjects/membersysManager
+-- [email protected] 
-- [email protected]  extraneous

跟less 也有关系？望大神解答。

vux-loader 对process.env.NODE_ENV 参数太敏感，导致 build 完成后不退出。

module.exports = VuxLoader.merge(webpackConfig, {
    plugins: [
        'vux-ui',
        'duplicate-style'
    ]
})

这里作为通用部分，假如 process.env.NODE_ENV 不为 production 的时候，vux-loader 便不会执行duplicate-style 插件。 感觉这样 vux-loader 成为了一个黑盒子，讲道理应该交给用户的 webpack.config.js ，根据 process.env.NODE_ENV去判断使用不使用duplicate-style ， 而不应该放在vux-loader 内部去做处理。

同时还发现了一个 BUG, 当 process.env.NODE_ENV 为其他数值，比如 localtest, 在 vux-loader 插件 index.js 第19行，

if (process.env.NODE_ENV !== 'production' && !process.env.VUE_ENV && !/build\/build/.test(process.argv) && !/webpack\.prod/.test(process.argv)) {
   require('./libs/report')
}

这句话，会使 webpack build 完成之后挂起不结束，卡在这个地方。 当 process.env.NODE_ENV 为 production 的时候便能正常退出。 具体错误原因没法定位了。

提示vux-loader配置问题,会导致打包过大,更新loader问题.

用 vue-cli 和模板 airyland/vux2 来初始化的项目,webpack.base.conf.js配置看了看也默认配置了,依赖全用的npm 自己也试着更新了vux 和vux-loader;
配置如下: "vux": "^2.7.5" ; "vux-loader": "^1.1.28",

module: {
rules: [
...(config.dev.useEslint ? [{
test: /.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
}] : []),
{
test: /.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /.(png|jpe?g|gif|svg)(?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(?.)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}

module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui', 'progress-bar', 'duplicate-style']
})

插件duplicate-style缺少配置项取消log输出

我使用duplicate-style插件，每次都会输出
======== vux-loader: duplicate-style start~ ========
======== vux-loader: duplicate-style done! ========

当有多个css时便会输出多次，能不能修改为默认不输出，至少给个配置项取消输出？

在windows平台build时，进度条到91%就不动了。

在 vue-cli 生成的配置上进行的修改，在mac上正常，在window平台run dev 正常，run build 到91%就不动了。win7和win10都试了。
vux-loader: 1.0.61 和 1.1.0都试了
vue-loader: 12.0.4

webpack.base.conf.js 的配置如下

var path = require('path')
var vuxLoader = require('vux-loader')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
var webpack = require('webpack')
var autoprefixer = require('autoprefixer')
var browserList = require('../package.json').browserslist

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

// multiple project, each project has an entry
var entry = {}
var projects = config.projects
var alias = {
  'vue$': 'vue/dist/vue.esm.js',
  '@': resolve('src')
}
projects.forEach(function (project) {
  var name = project.name
  entry[name] = './src/' + name + '/main.js'
  alias['@' + project.alias] = resolve('src/' + name)
  alias['@' + project.alias + 'a'] = resolve('src/' + name + '/assets')
})



module.exports = vuxLoader.merge({
  entry: entry,
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: alias
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  plugins: [
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname, '..'),
      manifest: require('./vendor-manifest.json')
    }),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: [
          autoprefixer({ browsers: browserList }),
        ]
      }
    })
  ]},
  {
    plugins: ['vux-ui', 'duplicate-style', 'progress-bar',
      {
        name: 'less-theme',
        path: './src/m/assets/style/theme.less'
      }
    ]
  }
)

关于$http.post的问题

IOS 7的系统$http.post调用异常

能不能加个可以自定义 svg 文件位置的环境变量 ？或者别的什么方式

现在的图标文件都放在 node_modules/vux/src/icons 下，有点别扭。

template or render function not defined

我没有用官方的vue-cli,而是安装了vux-loader

config如上图所示
直接导出webpackConfig,可以正常运行,
但是导出config的话 就会有如标题所示的错误

正则匹配 ts-loader 逻辑有 bug

源码如下：

/**
   * ======== append js-loader for ts-loader ========
   */
//....
if (rule.loader === 'ts' || rule.loader === 'ts-loader' || (/ts/.test(rule.loader) && !/!/.test(rule.loader))) {

正则/ts/ 匹配到使用绝对路径的 loader /Users/xxxx/Documents/xxx/xxx-loader 中的 Documents，改成 /\bts\b/ 好一点吧

在PHP的Laravel框架中使用Vux(vux-loader)遇到的路径问题。

因为PHP的Laravel框架自己带了一个“包装过”的 Webpack，叫Laravel-mix

在最新的vux2.6.5 vux-loader 1.1.13的环境下。
js-loader.js 的 50行

const pkgPath = vuxConfig.options.vuxDev ? path.join(this.options.context, 'package.json') : path.join(this.options.context, 'node_modules/vux/package.json')

this.options.context 的值为 /[path to project]/node_modules/laravel-mix/src/builder

所以会导致
Module build failed: Error: Cannot find module '/[path to project]/node_modules/laravel-mix/src/builder/node_modules/vux/package.json'

而且这段代码貌似并没有什么用途。。。。。

请问duplicate-style如何区分生产或者开发模式

最近项目开发到一个阶段之后，感觉打包和热更新明显变慢了，现在的vux-loader是这样配置的：

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [
    'vux-ui', 'inline-manifest', 'progress-bar', 'duplicate-style',
//     {
//       name: 'js-parser',
//       test: /main\.js/,
//       fn: function (source) {
// //         str = `[${str.join(',\n')}]`
// //         source = source.replace('const routes = []', 'const routes = ' + str)
//
//
//         return source
//       }
//     },
    {
      name: 'i18n',
      vuxStaticReplace: false,
      staticReplace: false,
      extractToFiles: 'src/locales/global_locales.yml',
      localeList: ['en', 'zh-CN']
    },
    {
      name: 'less-theme',
      path: 'src/assets/less/vux-theme.less'
    },
    {
      name: 'build-done-callback',
      fn: function () {
        console.log('======== build success! ========')
      }
    }
  ]
})

自觉告诉我，如果开发的时候不进行【duplicate-style】的优化可能会相对快一些，请@airyland 有空能告诉一下：

module.exports = vuxLoader.merge(webpackConfig, {
  options: {},
  plugins: [{
    name: 'vux-ui'
  }]
})

官方文档所指的【options】中的【env】和插件中【envs 非必须，数组，当前插件在哪些环境变量里执行，不定义则默认执行】是如何配置呢？

vux2组件demo无法查看

Uncaught Error: Module build failed: YAMLException: can not read a block mapping entry; a multiline key may not be an implicit key at line 78, column 7:
暂无数据: 暂无数据

https://static.vux.li/demos/v2/static/js/app.20c722cdb2b1ceef9682.js

Datetime

弹出框除了当前选中的应该都是阴影虚幻的吧

vux-loader 在非 production 环境构建时，会每隔 1200 秒向 https://vux.li/vux-loader-anonymous-tracking.html 报告数据，导致 webpack 不会退出

有时候我们在部署到线上的时候，特意不设置 process.env.NODE_ENV 为 production，这样 Vue 更好调试，但 vux-loader 在这时候会导致 webpack 运行结束后不退出。

能不能提供一个单独的配置来关闭这个数据上报，而不是靠环境来判断。

将 process.env.NODE_ENV 和 vuxLoader 里的 env 设置为同一个非 production 值也可以实现，但这样略显繁琐。

相关代码：

const buildEnvs = vuxConfig.options.buildEnvs || ['production']
if (buildEnvs.indexOf(process.env.NODE_ENV) !== -1) {
  process.env.__VUX_BUILD__ = true
} else {
  process.env.__VUX_BUILD__ = false
}

if (process.env.__VUX_BUILD__.toString() === 'false' && (process.env.NODE_ENV !== 'production' && !process.env.VUE_ENV && !/build\/build/.test(process.argv) && !/webpack\.prod/.test(process.argv))) {
  require('./libs/report')
}

vue-loader升级到了13.0.0导致vux-loader配置出错

hi，vue-loader升级到13.0.0，打包时没办法按需打包了，打包时间也很久，会看到vux-loader的提示。

看vue-loader 13.0.0的changelog使用了es方式处理模块，暂时可以把esModule置为false解决这个问题，vux-loader何时可以适配。

非常感谢开发者的支持。

使用vux 打包平均450k

这个issues也许提的不应该！可实在没辙！
在项目中这么引入的，打包并且压缩后，出来就400k，不知道 是自己写法有问题 还是loadder有问题！
import {
Group,
Cell,
Tabbar,
TabbarItem,
XTextarea,
XTable,
Divider
} from "vux";

安装vux-loader 引入包失败

根据文档安装vux-loader

 ✘  https://google.com/#q=import%2Fno-unresolved  Unable to resolve path to module 'vux'  
 /Users/Matt/workspace/webei/daodian/src/routes/pay/index.vue:69:29
 import { Group, Cell } from 'vux';
                              ^

  ✘  https://google.com/#q=import%2Fextensions     Missing file extension for "vux"        
  /Users/Matt/workspace/webei/daodian/src/routes/pay/index.vue:69:29
  import { Group, Cell } from 'vux';

生效但是没样式

import Group from 'vux/dist/components/group';
import Cell from 'vux/dist/components/cell';

以下方式生效

import Group from 'vux/src/components/group';
import Cell from 'vux/src/components/cell';

vux和vux-loader更新到latest版本之后出现：Unknown custom element: <v-no-ssr> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

App.vue基本上是参考vux demo做的示例：

<template>
<div id="app">
  <vue-topprogress ref="topProgress"></vue-topprogress>
  <!-- 备选方案：参考vux文档 -->
  <!--<loading v-model="isLoading"></loading>-->

  <!-- main content -->
  <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="55px">
    <x-header class="border-1px app-header-bar" :left-options="leftOptions" :title="appTitle" @on-click-back="onHeaderBarTapBck">
    </x-header>

    <transition :name="transitionName">
      <navigation>
      <!-- <keep-alive> -->
        <router-view class="child-view"></router-view>
      <!-- </keep-alive>   -->
      </navigation>
    </transition>

    <tabbar class="vux-demo-tabbar" icon-class="vux-center" slot="bottom">
      <tabbar-item :link="{path:'/Info', replace: true}" :selected="path === '/Info'" @click.native="onHomeBarClick">
        <i class="iconfont icon-vue" slot="icon"></i>
        <span slot="label">主页</span>
      </tabbar-item>
      <tabbar-item :link="{path:'/Demo'}" :selected="isDemo" @click.native="onDemoBarClick">
        <span class="demo-icon-22" slot="icon" style="font-size:22px;line-height: 26px;">🌰</span>
        <span slot="label"><span v-if="componentName" class="vux-demo-tabbar-component">{{componentName}}</span><span v-else>栗子</span></span>
      </tabbar-item>
    </tabbar>

  </view-box>
</div>
</template>

<script type="text/ecmascript-6">
import {
  vueTopprogress
} from 'vue-top-progress'
import {
  mapState,
  mapMutations
} from 'vuex'
import {
  Loading,
  XHeader,
  Tabbar,
  TabbarItem,
  Icon,
  ViewBox
} from 'vux'

export default {
  name: 'app',
  components: {
    vueTopprogress,
    Loading,
    XHeader,
    Tabbar,
    TabbarItem,
    Icon,
    ViewBox
  },
  data() {
    return {
      transitionName: 'slide-left'
    }
  },
  computed: {
    backState() {
      return this.$store.state['pageStack'].backState
    },
    ...mapState({
      route: state => state.route,
      path: state => state.route.path
    }),
    ...mapState([
      'isLoading',
      'appTitle',
      'appTitleBarBackBtnVisible'
    ]),
    isDemo() {
      return /Components|Demo/.test(this.path)
    },
    componentName() {
      if (/Components|Demo\/./.test(this.path)) {
        return this.appTitle
      }
    },
    leftOptions() {
      return {
        showBack: !/.[/Info]./.test(this.path) || /.[/Demo]./.test(this.path),
        backText: '',
        preventGoBack: true
      }
    }
  },
  watch: {
    backState(state) {
      if (state) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = 'slide-left'
      }
    },
    isLoading(val) {
      if (val) {
        this.$refs.topProgress.start()
      } else {
        this.$refs.topProgress.done()
      }
    },
    path(path) {
      if (/Info/.test(this.path)) {
        this.$vp.psModifyBackState(true)
      } else if (/Demo/.test(this.path)) {
        // TODO 将scroll上移
      }
    }
  },
  methods: {
    ...mapMutations([
      'updateBackStatus',
      'updateLoadingStatus'
    ]),
    onHomeBarClick() {
      if (this.backState) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = 'slide-left'
      }
    },
    onHeaderBarTapBck() {
      this.$vp.psGoBack()
    },
    onDemoBarClick() {
      this.updateBackStatus(false)
    }
  },
  created() {
    this.$navigation.on('refresh', () => {
      this.$refs.topProgress.done()
    })
  }
}
</script>

<style lang="less" scoped>
#app {
    // 参考：https://vux.li/#/zh-CN/components?id=viewbox
    height: 100%;

    .child-view {
        width: 100%;
        top: 46px;
    }
    .slide-left-enter-active,
    .slide-left-leave-active,
    .slide-right-enter-active,
    .slide-right-leave-active {
        will-change: transform;
        transition: all 500ms;
        height: 100%;
        top: 46px;
        position: absolute;
        backface-visibility: hidden;
        perspective: 1000;
    }
    .slide-right-enter {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    .slide-right-leave-active {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-left-enter {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    .slide-left-leave-active {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    .vux-header {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 100;
    }

    .iconfont {
        color: rgb(77,49,74);
    }
}
</style>

查看报错的位置：

确实木有声明。

@airyland

更新到1.2.1版本后chrome无法调试vue文件

更新到1.2.1版本后chrome无法调试.vue文件，1.2.0版本则正常。
现象如下：
比如，按F12打开调试工具，在相应vue文件里的create方法里的第1、2行分别打一个断点，F5刷新，此时会触发第一个断点，这时候再按F5，断点就不再触发了，除非新建一个窗口重复上述步骤。
另外一种现象是，如果第一个断点触发后，按F8继续运行，之后的断点都不会被触发。

只是vue文件才有这种问题。普通js文件不会，而且只有1.2.1版本有这个问题。1.2.0版本正常，已经验证多次。chrome也是最新版，mac 和 windows都有这种问题。

npm run lint 命令检查完毕不会退出 lint 进程

执行 npm run lint eslint 进程不退出

以下是package.json scripts：

"lint": "eslint --ext .js,.vue src",

导致的问题：

• 执行 npm run lint, eslint 检查完 js 文件后进程卡死，不会检查 .vue 文件，其不自动退出进程让开发者不能区分 正在检查？ or 检查完毕
• 配置 pre-commit 执行 npm run lint 之后，由于 lint 进程卡死，导致无法 commit

定位代码，我的 “解决” 方式

https://github.com/airyland/vux-loader/blob/master/src/libs/report.js#L34-L45

• 45行 1200000 这个定时器直接导致了卡死，注释之后功能正常
• 注释第 45 行问题解决

我的问题

• 这里似乎发送了一个请求？
• 可以请教这些代码是干嘛的吗？

style插入顺序

    "vux-loader": "^1.0.24"

使用 vue-cli 工具和 airyland/vux2 模板初始化项目后，
直接在vue文件的style标签中添加样式无法覆盖同优先级默认样式，
原因是vue文件中的样式在import进的组件样式之前被插入，后插入的组件的默认样式覆盖了自定义的样式

<template>
  <div>
    <div class="vux-demo">
      <img class="logo" src="../assets/vux_logo.png">
      <h1> </h1>
    </div>
    <group title="cell demo">
      <cell title="Vux" value="Cool" is-link></cell>
    </group>
  </div>
</template>

<script>
import { Group, Cell } from 'vux';

export default {
  components: {
    Group,
    Cell,
  },
  data() {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello World!',
    };
  },
};
</script>

<style>
.weui_cell_bd > p {
  color: red;
}
.vux-demo {
  text-align: center;
}
.logo {
  width: 100px;
  height: 100px
}
</style>

以上代码运行后字体颜色仍为默认的黑色

针对vue-cli新版webpack模板初始化项目的问题

• 最近升级项目过程中，使用了vue-cli 2.9.2的webpack模板，准备将项目升级到webpack3，跟随官方的构建流程，出现以下问题：

• 先贴一下核心的一些依赖库：

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "prod": "node build/prod-server.js",
    "lint": "eslint --ext .js,.vue src",
    "fix": "npm run lint --fix"
  },
  "dependencies": {
    "axios": "^0.17.1",
    "babel-runtime": "^6.26.0",
    "better-scroll": "^1.6.3",
    "element-ui": "^2.0.9",
    "fastclick": "^1.0.6",
    "vue": "^2.5.2",
    "vue-lazyload": "^1.1.4",
    "vue-navigation": "^1.1.3",
    "vue-router": "^3.0.1",
    "vue-viewplus": "^0.1.6",
    "vuerify": "^0.4.0",
    "vuex": "^3.0.1",
    "vux": "^2.7.6"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.1.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    // ... 省略
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    **"vue-loader": "^13.3.0",**
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    **"vux-loader": "^1.1.29",
    "webpack": "^3.6.0",**
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },

• 如果使用vux-loader在build之后：
  

• build/webpack.base.conf.js配置如下：

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

const webpackConfig = {
// module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
      '@assets': resolve('src/assets'),
      '@api': resolve('src/api'),
      '@transcode-types': resolve('src/api/transcode-types.js'),
      '@mutation-types': resolve('src/store/mutation-types.js'),
      '@styl': resolve('src/assets/styl'),
      '@comp': resolve('src/components'),
      '@ccomp': resolve('src/base/comm'),
      '@bcomp': resolve('src/base/business'),
      '@model': resolve('src/model'),
      '@store': resolve('src/store')
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

const vuxLoader = require('vux-loader')
const vuxConfig = require('./vux-config')
module.exports = vuxLoader.merge(webpackConfig, vuxConfig)

• 运行在报错效果：
  
  

• 如果不使用vux-loader:

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

可以运行，但是.....

@airyland 老大赶紧的！！！ 

index.js?102c:3 VUX: 如果你看到这一行，说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大。请升级到最新版本 vux-loader，建议开启 eslint(standard)。

更新代码之后index.js?102c:3 VUX: 如果你看到这一行，说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大。请升级到最新版本 vux-loader，建议开启 eslint(standard)。
配置了：
`
const vuxLoader = require('vux-loader')
var webpackConfig = require('./webpack.base.conf.js')

module.exports = vuxLoader.merge(webpackConfig, {
plugins: [
{
name: 'vux-ui'
},
{
name: 'script-parser',
fn: function (source) {
return source.replace('VARIABLE', 'v2')
}
},
{
name: 'style-parser',
fn: function (source) {
return source.replace('black', 'white')
}
},
{
name: 'js-parser',
fn: function (source) {
return source.replace('black', 'white')
}
},
// css 重复代码清除, 在webpack 构建完成后对生成的css文件使用cssnano进行重复样式清除。建议只在production环境下开启，因为dev环境没有必要。
{
name: 'duplicate-style',
events: {
done: function () {
console.log('done!')
}
}
},
{
name: 'build-done-callback',
fn: function () {
console.log('done!')
}
}
]
})

无解，目前版本：
"dependencies": {
"axios": "^0.16.2",
"babel-runtime": "^6.23.0",
"fastclick": "^1.0.6",
"good-storage": "^1.0.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vplus": "^0.1.17",
"vue": "^2.3.4",
"vue-lazyload": "^1.0.5",
"vue-router": "^2.3.1",
"vuerify": "^0.4.0",
"vuex": "^2.3.1",
"vux": "^2.4.0"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-function-bind": "^6.22.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"url-loader": "^0.5.8",
"vue-loader": "^12.2.1",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.3",
"vux-loader": "^1.0.68",
"webpack": "^2.6.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
`

请指教！

关于以插件形式调用 ConfirmPlugin , 会导致Vux打包过大的问题

vux 和vux-loader版本:

"vux": "^2.5.0"
"vux-loader": "^1.1.1",

目前已经在webpack.base.js 里面配置:

module.exports = vuxLoader.merge(webpackBaseConf, {
  plugins: ['vux-ui','progress-bar', 'duplicate-style']
})

已经生效，开发了一个月多月一直没什么问题。
今天想使用ConfirmPlugin 插件时，发现在单独一个页面引入的会失败，后在根据文档示例

import  { ConfirmPlugin } from 'vux'
Vue.use(ConfirmPlugin)

然后在页面调用

this.$vux.confirm.show({
                    title: 'title',
                    content: 'content。',
                    onConfirm () {
                       alert('yes');
                    }
                });

则可以使用，但是会console 会提示

在 babel @babel/preset-env 配置下，无法 import vux 的 commonjs 模块

无法 import TransferDomDirective

报错信息：

完整demo见：

https://github.com/hooraygith/vux-loader-test

.babelrc 配置如下：

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "modules": false
    }]
  ]
}

将 useBuiltIns 和 modules 配置去掉可以打包；

webpack 配置里将 vuxLoader.merge 去掉则可以 import 自己写的 commonjs 模块

vuxLoader.merge 多次调用无效

我使用 https://github.com/airyland/vux2 (vux-loader version 1.0.24)提供的模板编写应用，想在build时自动将组件改成异步组件。于是我在 webpack.prod.conf.js 末尾加入了以下代码

webpackConfig = vuxLoader.merge(webpackConfig, {
  plugins: [{
    name: 'js-parser',
    test: /pages\/components\.js$/,
    fn(source) {
      source = source.replace(/^\s*import\s+(\w+)\s+from\s+([^;]+?);?\s*$/gm, ($0, $1, $2) => {
        return `const ${$1} = function (resolve) {
  require([${$2}], resolve)
}`
      })
      return source
    }
  }]
}

使用webpack build，组件会分片，但是分片文件内容一模一样且只有几行代码，项目无法正常运行。查阅 vux-loader 源码后通过以下代码解决了

const merge = require('webpack-merge')
const vuxConfig = {...}
webpackConfig = merge(webpackConfig, { vux: vuxConfig }

项目比较着急，没有细看是什么原因。

XAddress如何修改确定和取消那两个按钮的值

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

`
node_modules/.npminstall/vux-loader/1.0.17/vux-loader/plugins/html-build-callback/index.js:29
let _this = this
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
`

不支持 [email protected]

应该是这个 vuejs/vue-loader#1087 导致的

vux文档的vux-loader部分的章节，“开源组件多语言支持”疑惑

该章节文档里头说到：

开源组件多语言支持

如果以js方式分发，一般默认一个语言，用户可以加上另外的语言包，但是代码里必不可少存在相应的转换函数，对于只需要单语言的人来是个浪费和繁琐。要么所有一起打包，这个也极浪费。要么一个一个打包，这样又失去了动态多语言支持。

于是vux在vux-loader的支持下实现了使用时构建，无论是静态输出和动态支持。

[具体文档]

对于使用时构建，想知道，具体的vux-loader源码的逻辑体现在哪里？

有没有配合cookingjs的列子

开始项目为了简单配置webpack.使用了cookingjs.
const webpackConfig = cooking.resolve()
module.exports = webpackConfig
const vuxLoader = require('vux-loader')
module.exports = vuxLoader.merge(webpackConfig, {
options: {},
plugins: [{
name: 'vux-ui'
}]
})
理论cooking.resolve()返回的也是webpack配置.但是这样使用后vue也失效了.
实在不清楚怎么弄.但还是想使用vux.所以只能发到这里问问.

XAddress组件可以固定某个省市不变吗，区可以改变(例如：广东省，深圳市，xx区)

关于升级版本后 主题文件配置错误

因为功能需要将 vux的版本更新至 2.7.3 浏览器console 提示
[VUX] 抱歉，当前组件[cell]要求更新依赖 vux-loader@latest
于是升级了[email protected]

@* https: ;@theme-color: #01d081;@header-background-color: @theme-color;@header-title-color: #fff;@header-text-color: #FFF;@header-arrow-color: #FFF;@tabbar-text-active-color: @theme-color;@button-global-border-radius: 5px;@button-global-font-color: #FFFFFF;@button-global-margin-top: 15px;@button-global-height: 42px;@button-global-disabled-font-color: rgba(255,255,255,.6);@button-global-active-font-color: #ccc;@button-global-font-size: 18px;@button-warn-bg-color: #E64340;@button-warn-active-color: #CE3C39;@button-default-bg-color: #F8F8F8;@button-default-font-color: #000000;@button-default-active-bg-color: #DEDEDE;@button-default-disabled-font-color: rgba(0,0,0,.3);@button-default-disabled-bg-color: #F7F7F7;@button-default-active-font-color: rgba(0,0,0,.6);@button-primary-bg-color: @theme-color;@button-primary-active-bg-color: #01a667;@tab-text-disabled-color: #ddd;@tab-text-default-color: #666;@tab-text-active-color: @theme-color;@tab-bar-active-color: @theme-color;
^
Unrecognised input
in E:\wisdom_city******************\wxzhcs-v20170421-1.0.0\wx_wisdom_employee\src\views\message\messageCenter.vue (line 184, column 0)
@ .//vue-style-loader!.//css-loader?{"minimize":false,"sourceMap":false}!.//vue-loader/lib/style-compiler?{"id":"data-v-40b03735","scoped":true,"hasInlineConfig":false}!.//vux-loader/src/after-less-loader.js!.//less-loader/dist?{'modifyVars':{'* https':'','theme-color':'#01d081','header-background-color':'@theme-color','header-title-color':'#fff','header-text-color':'#FFF','header-arrow-color':'#FFF','tabbar-text-active-color':'@theme-color','button-global-border-radius':'5px','button-global-font-color':'#FFFFFF','button-global-margin-top':'15px','button-global-height':'42px','button-global-disabled-font-color':'rgba(255,255,255,.6)','button-global-active-font-color':'#ccc','button-global-font-size':'18px','button-warn-bg-color':'#E64340','button-warn-active-color':'#CE3C39','button-default-bg-color':'#F8F8F8','button-default-font-color':'#000000','button-default-active-bg-color':'#DEDEDE','button-default-disabled-font-color':'rgba(0,0,0,.3)','button-default-disabled-bg-color':'#F7F7F7','button-default-active-font-color':'rgba(0,0,0,.6)','button-primary-bg-color':'@theme-color','button-primary-active-bg-color':'#01a667','tab-text-disabled-color':'#ddd','tab-text-default-color':'#666','tab-text-active-color':'@theme-color','tab-bar-active-color':'@theme-color'},'sourceMap':true}!.//vux-loader/src/style-loader.js!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/views/message/messageCenter.vue 4:14-1561 13:3-17:5 14:22-1569
@ ./src/views/message/messageCenter.vue
@ ./src/router/routeOption.js
@ ./src/router/router.js
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js

所有页面模块均报错！
未升级版本前无问题
package.json
"dependencies": { "fastclick": "^1.0.6", "vue": "^2.2.6", "vue-navigation": "^1.1.1", "vue-router": "^2.3.1", "vuex": "^2.3.1", "vuex-persistedstate": "^2.0.0", "vux": "^2.7.3" }, "devDependencies": { "autoprefixer": "^6.7.2", "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chalk": "^1.1.3", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "eventsource-polyfill": "^0.9.6", "express": "^4.14.1", "extract-text-webpack-plugin": "^2.0.0", "file-loader": "^0.11.1", "friendly-errors-webpack-plugin": "^1.1.3", "html-webpack-plugin": "^2.28.0", "http-proxy-middleware": "^0.17.3", "less": "^2.7.2", "less-loader": "^4.0.3", "opn": "^4.0.2", "optimize-css-assets-webpack-plugin": "^1.3.0", "ora": "^1.2.0", "rimraf": "^2.6.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "url-loader": "^0.5.8", "vue-loader": "^11.3.4", "vue-style-loader": "^2.0.5", "vue-template-compiler": "^2.2.6", "vux-loader": "^1.1.23", "webpack": "^2.3.3", "webpack-bundle-analyzer": "^2.2.1", "webpack-dev-middleware": "^1.10.0", "webpack-hot-middleware": "^2.18.0", "webpack-merge": "^4.1.0" },
node : v6.11.3

webpack base配置：
module.exports = vuxLoader.merge(webpackConfig, { options: {}, plugins: ['vux-ui', 'duplicate-style', { name: 'less-theme', path: 'src/config/theme.less' }] })
vux-loader.conf.js:
`var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
})
}
`

配置vux-loader后似乎ES6转码失败，去掉webpack.base.config.js 中的 vux-loader.merge 项目转码运行都正常 ，请求指导

// ------- webpack.base.config.js ------ start

"use strict"
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require("path");
const vuxLoader = require('vux-loader');
var entry = [path.resolve(__dirname, "../src/views/main")],
cdnPrefix = "",
buildPath = path.resolve(__dirname, "../dist/gzh/"),
publishPath = "/gzh/";

const webpackConfig = {
entry: {
index:entry,
vendors: ["vue","vue-router","vue-resource","vue-touch","./src/libs/vue-zoom","./src/libs/vue-scroll","./src/libs/vue-model"]
},
output: {
path: path.resolve(__dirname, buildPath),
filename: "[name][hash].js",
publicPath: publishPath,
chunkFilename: "[id].[chunkhash].js"
},
externals: {
"BMap": "BMap",
"wx":"wx"
},
module: {
rules:[{
test: /.vue$/,
loader: "vue-loader",
}, {
test: /.scss$/,
loader: ExtractTextPlugin.extract(
{fallback:"style-loader", use:["css-loader?sourceMap!sass-loader!cssnext-loader"]}
)
}, {
test: /.css$/,
loader: ExtractTextPlugin.extract(
{fallback:"style-loader", use:["css-loader?sourceMap!sass-loader!cssnext-loader"]})
}, {
test: /.less$/,
loader: ExtractTextPlugin.extract(
{fallback:"style-loader", use:["css-loader?sourceMap!less-loader!cssnext-loader"]})
},{
test: /.js$/,
loader: "babel-loader",
include:[path.resolve(__dirname, "../src")]
}, {
test: /.(jpg|png|gif)$/,
loader: "file-loader?images/[hash].[ext]"
}, {
test: /.woff(2)?(?v=[0-9].[0-9].[0-9])?$/,
loader: "url-loader?limit=10000&minetype=application/font-woff"
}, {
test: /.(ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,
loader: "file-loader?"
}, {
test: /.json$/,
loader: "json-loader"
}, {
test: /.(html|tpl)$/,
loader: "html-loader"
}]
},
resolve: {
extensions: [".js",".vue"],
modules:[
path.resolve(__dirname, "../src"),
path.resolve(__dirname, "../node_modules")
],
alias: {
"src": path.resolve(__dirname, "../src"),
"assets": path.resolve(__dirname, "../src/assets"),
"components": path.resolve(__dirname, "../src/components"),
"baseView": path.resolve(__dirname, "../src/views"),

    }
}

};

module.exports = vuxLoader.merge(webpackConfig, {
plugins: ['vux-ui']
})

// ----------- webpack.base.config.js --------- end

// ----------- package.json --------- start

{
"name": "webpack",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "cross-env node ./build/dev-server.js",
"test": "webpack --display-modules --display-chunks --config build/webpack.test.conf.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"babel": "^6.5.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.3.2",
"babel-plugin-istanbul": "^3.1.2",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"babel-runtime": "^6.20.0",
"clean-webpack-plugin": "^0.1.14",
"cross-env": "^2.0.0",
"css-loader": "^0.28.2",
"cssnext-loader": "^1.0.1",
"del": "^2.2.1",
"express": "^4.14.0",
"extract-text-webpack-plugin": "^2.0.0",
"fastclick": "^1.0.6",
"file-loader": "^0.9.0",
"function-bind": "^1.1.0",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.24.1",
"http-proxy-middleware": "^0.17.2",
"inject-loader": "^2.0.1",
"iscroll": "^5.2.0",
"json-loader": "^0.5.4",
"json-server": "^0.8.17",
"lodash": "^4.14.1",
"less":"^2.7.2",
"less-loader":"^4.0.5",
"markdown": "^0.5.0",
"mock": "^0.1.1",
"mockjs": "^1.0.1-beta2",
"node-sass": "^3.8.0",
"object-assign": "^4.1.0",
"precss": "^1.4.0",
"sass-loader": "^4.0.0",
"store": "^1.3.20",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"video.js": "^5.11.6",
"vue": "^2.1.6",
"vue-hot-reload-api": "1.3.3",
"vue-html-loader": "^1.2.3",
"vue-loader": "^13.0.0",
"vue-template-compiler": "^2.3.3",
"vue-resource": "^0.9.3",
"vue-router": "^2.5.1",
"vue-style-loader": "^3.0.0",
"vue-touch": "^2.0.0-beta.4",
"vue-swipe": "^2.0.2",
"vux":"^2.2.0",
"vux-loader":"^1.0.56",
"webpack": "^3.1.0",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.15.1",
"webpack-hot-middleware": "^2.13.2",
"webpack-merge": "^2.6.1"
},
"dependencies": {
"vue": "^2.3.3",
"vue-router": "^2.0.0"
},
"description": ""
}

// ----------- package.json --------- end

// -------- 编译打包完成后 访问 vue 报错误

Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

//------ 似乎es6 没转码成功，但去掉配置后转码，运行都正常，请求指导

我刚通过npm 装的vux-loader，为什么还报错要我更新？

index.vue?a177:15 [VUX warn] 抱歉，clocker 组件需要升级 vux-loader 到最新版本才能正常使用
(anonymous) @ index.vue?a177:15
./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./node_modules/vux/src/components/clocker/index.vue @ app.js:1122
webpack_require @ app.js:679
fn @ app.js:89
(anonymous) @ index.vue:1
./node_modules/vux/src/components/clocker/index.vue @ app.js:5094
webpack_require @ app.js:679
fn @ app.js:89
(anonymous) @ index.js:38
./node_modules/vux/index.js @ app.js:4918
webpack_require @ app.js:679
fn @ app.js:89
(anonymous) @ selector.js?type=script&index=0&bustCache!./src/components/HelloWorld.vue:1
./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/HelloWorld.vue @ app.js:1826
webpack_require @ app.js:679
fn @ app.js:89
(anonymous) @ HelloWorld.vue:1
./src/components/HelloWorld.vue @ app.js:6635
webpack_require @ app.js:679
fn @ app.js:89
(anonymous) @ index.js:3
./src/router/index.js @ app.js:6651
webpack_require @ app.js:679
fn @ app.js:89
(anonymous) @ main.js:4
./src/main.js @ app.js:6643
webpack_require @ app.js:679
fn @ app.js:89
0 @ app.js:6660
webpack_require @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
index.js?34fc:3 VUX: 如果你看到这一行，说明 vux-loader 配置有问题或者代码书写规范的原因导致无法解析成按需引入组件，会导致打包体积过大。请升级到最新版本 vux-loader，建议开启 eslint(standard)。
(anonymous) @ index.js?34fc:3
./node_modules/vux/index.js @ app.js:4918
webpack_require @ app.js:679
fn @ app.js:89
(anonymous) @ selector.js?type=script&index=0&bustCache!./src/components/HelloWorld.vue:1
./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/HelloWorld.vue @ app.js:1826
webpack_require @ app.js:679
fn @ app.js:89
(anonymous) @ HelloWorld.vue:1
./src/components/HelloWorld.vue @ app.js:6635
webpack_require @ app.js:679
fn @ app.js:89
(anonymous) @ index.js:3
./src/router/index.js @ app.js:6651
webpack_require @ app.js:679
fn @ app.js:89
(anonymous) @ main.js:4
./src/main.js @ app.js:6643
webpack_require @ app.js:679
fn @ app.js:89
0 @ app.js:6660
webpack_require @ app.js:679
(anonymous) @ app.js:725
(anonymous) @ app.js:728
index.vue?6270:53 [VUX] 抱歉，当前组件[cell]要求更新依赖 vux-loader@latest