javascript - Vue.js browserify 找不到模块

Question

对于我尝试与 vue.js 1.0 一起使用的几乎每个 npm 包，我都会收到此错误:

{ Error: Cannot find module '!!./../../../node_modules/css-loader/index.js!./../../../node_modules/vue-loader/lib/style-rewriter.js!./../../../node_modules/vue-loader/lib/selector.js?type=style&index=0!./dashboard.vue' from '/Users/jamie/Code/forum/node_modules/vue-html5-editor/dist'
    at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:46:17
    at process (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:173:43)
    at ondir (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:188:17)
    at load (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/jamie/Code/forum/node_modules/resolve/lib/async.js:92:31)
    at /Users/jamie/Code/forum/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:117:15)

这让我抓狂!我正在使用 vue.js 和 browserify。在网上到处找:

https://github.com/webpack/css-loader/issues/240 https://github.com/webpack/css-loader/issues/180 https://github.com/webpack/css-loader/issues/295 https://github.com/webpack/css-loader/issues/163

似乎没有任何效果!我做错了什么!？

我遇到这个问题的 2 个包:

https://github.com/lian-yue/vue-upload-component/
https://github.com/PeakTai/vue-html5-editor

我的 gulpfile:

const elixir = require('laravel-elixir');
require('laravel-elixir-vueify');
require('laravel-elixir-stylus');



    elixir(mix => {
        mix.browserify('main.js');
        mix.styles([
                './node_modules/normalize-css/normalize.css',
                './node_modules/nprogress/nprogress.css',
                './node_modules/sweetalert/dist/sweetalert.css',
                ]);
        mix.stylus('app.styl');
    });

解决方案真的可以帮助我。

--编辑--

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-browserify-official": "^0.1.3",
    "laravel-elixir-stylus": "^2.0.3",
    "vue-html5-editor": "^0.5.1"
  },
  "dependencies": {
    "browserify": "^13.1.0",
    "laravel-elixir-vueify": "^2.0.0",
    "normalize-css": "^2.3.1",
    "nprogress": "^0.2.0",
    "stylus": "^0.54.5",
    "sweetalert": "^1.1.3",
    "vue": "^1.0.26",
    "vue-resource": "^0.9.3",
    "vue-router": "^0.7.13",
    "vue-spinner": "^1.0.2",
    "vue-upload-component": "^2.0.0-beta"
  }
}

Answer 1

那些是 webpack 包，您正在使用 browserify。如果你需要使用 webpack 包，你应该使用 webpack 作为你的打包器。

我确实尝试安装了 vue-upload-component 包，看看使用 browserify 和 elixir 会有多容易，但是至少可以说这很尴尬。我没有让它工作，因为它使用 babel 转换来编译 vue 文件，所以首先你需要手动将它们拉入，然后你可能需要编写一个 elixir 扩展来使用这些转换来让它工作。显然每个 webpack 包都会不同，所以每次安装时都需要这样做，这很不方便。