Vue.js浏览器验证找不到模块

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)

快把我逼疯了！我在browserify中使用vue.js。在网上到处找：

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

似乎什么都不起作用！我做错了什么？

我遇到这个问题的两个包：

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

这些是您正在使用的browserify的webpack包。如果你需要使用webpack包，你应该使用webpack作为你的捆绑包。

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

Answer 2

我很幸运地更改了Vue组件的配置输出，我想使用webpack -p而不只是webpack。

然后，我可以获得没有热模块代码的输出，并将其放入browserify

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

其中，file.js是webpack的-p输出，SomeLibrary是希望出现在browserify包中的全局窗口范围的名称，file.browser.js是要包含在项目中的结果文件。