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包都是不同的，所以每次安装时都需要这样做，这几乎不方便。

Answer 2

我很幸运地改变了我想用来webpack -p而不仅仅是webpack的Vue组件的配置输出。

然后，我可以在没有热模块代码的情况下获取该输出，并通过browserify：

browserify file.js --standalone SomeLibrary > file.browser.js

file.js是 webpack -p 输出，SomeLibrary是浏览器包装中全局窗口范围所需的名称，file.browser.js是生成的文件包含在项目中。

vue.js browserify无法找到模块

2 个答案: