Vux: [Bug Report] vux在nuxt 2.0中按官方文档引入框架无法使用

Created on 24 Sep 2018 · 16Comments · Source: airyland/vux

VUX version

2.9.2

OS/Browsers version

windows 10

Vue version

2.5.17

Code

// nuxt.config.js中为：

const pkg = require('./package')
const path = require('path')
const vuxLoader = require('vux-loader')
module.exports = {
  mode: 'universal',
  css: [
    'vux/src/styles/reset.less',
    'vux/src/styles/1px.less'
  ],
  plugins: [
    {
      src: '~/plugins/vux-components',
      ssr: true
    },
    {
      src: '~/plugins/vux-plugins',
      ssr: false
    }
  ],

  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      const configs = vuxLoader.merge(config, {
        options: {
          ssr: true
        },
        plugins: ['vux-ui', {
          name: 'less-theme',
          path: path.join(__dirname, './styles/theme.less')
        }]
      })
      return configs
      //Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}



// package 中为：

 "dependencies": {
    "@nuxtjs/axios": "^5.0.0",
    "cross-env": "^5.2.0",
    "koa": "^2.5.2",
    "nuxt": "^2.0.0",
    "vux": "^2.9.2"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "babel-preset-env": "^1.7.0",
    "eslint": "^5.0.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-vue": "^4.0.0",
    "less": "^2.7.3",
    "less-loader": "^4.0.6",
    "nodemon": "^1.11.0",
    "vux-loader": "^1.2.9"
  }
}

Steps to reproduce

按照文档中的github中进行逐步安装并引用，但是提示没有正确的loader来加载这些组件，nuxt版本为2.0.0。
并按照文档来引入cell 和group来测试框架是否引入成功。但是报错。

What is Expected?

期待能够正常执行，nuxt版本为2.0
以下实际行为中的代码为片段，提交提示401错误，贴取片段。其他也是一样报错。

What is actually happening?

error in ./pages/index.vue

Module parse failed: Unexpected token (3:0)
You may need an appropriate loader to handle this file type.
| import { render, staticRenderFns } from "./index.vue?vue&type=template&id=2a183b29&"
| import script from "./index.vue?vue&type=script&lang=js&"

../node_modules/[email protected]@vux-loader/src/script-loader.js!export * from "./index.vue?vue&type=script&lang=js&"
|
|

@ ./.nuxt/router.js 5:9-7:3
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js

tim 20180924180429

Source

warriorBrian

Most helpful comment

同样的问题，感觉都要放弃了

我已经放弃了。我感觉vux的维护太慢了，你看issue里都几百个没处理。现在改用vant。一点不差，作者处理PR和更新都超快的

rason560 on 12 Oct 2018

👍3

All 16 comments

vue-loader 版本太高

yarn add [email protected] -D
or
npm install [email protected] -D

sxox on 28 Sep 2018

👍3

npm install [email protected] -D 安装之后，还是不行

JulanSu on 9 Oct 2018

升级Nuxt到2.0之后遇到同样的问题

5paceman on 9 Oct 2018

遇到同样问题。求作者给出方案

rason560 on 10 Oct 2018

同样的问题，感觉都要放弃了

reboy on 12 Oct 2018

同样的问题，感觉都要放弃了

我已经放弃了。我感觉vux的维护太慢了，你看issue里都几百个没处理。现在改用vant。一点不差，作者处理PR和更新都超快的

rason560 on 12 Oct 2018

👍3

请问 vant 是如何引入的？

reboy on 15 Oct 2018

请问 vant 是如何引入的？

nuxt_config里面，不要用vant官方指定的那个插件引入。要用nuxt的babel-plugin-component
build: { babel: { plugins: [ ["component", { "libraryName": "vant", "styleLibraryName": "vant-css", "style": true }] ] } }

但是部分插件没有对应的样式文件，plugins/vant.js里的引入就要改下：
import Vue from 'vue'
import { Button, Toast , Icon , Tab , List, Field } from 'vant'

// 以下组件没有对应css文件，需独立引用，否则babel-plugin-component会报错
import Tabs from 'vant/lib/tabs'

const components = {
Tab,
Tabs,
List,
Field,
Button,
Toast,
Icon
}

Object.keys(components).forEach(key => {
Vue.use(components[key])
})

rason560 on 15 Oct 2018

请问我在nuxt里面使用 postcss 按照nuxt官方的配置好postcss后，一直报没有loader来解析postcss这种文件类型。

reboy on 22 Oct 2018

我的也是，估计是版本太新的问题。