vuejs 2:npm ERR!无法从" @ / config"安装为

时间:2018-03-06 12:18:38

标签: npm vuejs2

我有:

$ nodejs --version 
v8.9.4
$ npm --version    
5.6.0

我尝试使用最新的laravel加入https://github.com/wxs77577/adminify vuejs / vuetify模板。 我做下一个: 1)laravel新歌

2)cd歌曲

 php artisan --version
Laravel Framework 5.6.8

3)我将所有文件从adminify / src /复制到Songs项目文件夹中的/ resources / assets / js /

4)我将webpack.mix.js修改为:

let mix = require('laravel-mix');
mix.js('resources/assets/js/main.js', 'public/js')    // main.js is entry point of the project 
   .sass('resources/assets/sass/app.scss', 'public/css');

5)进入我的resources / assets / js / http.js我从Laravel的资源/ assets / js / bootstrap.js添加了axios头配置,所以它有内容:

import Vue from 'vue'
import axios from 'axios'
import config from './config'

// enable mock
// import mock from './mock'
// if (!config.debug.mock) {
//   mock.restore()
// }


window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}


var http = axios.create({
  baseURL: config.api,
  timeout: 1000
  // headers: { 'Authorization': 'Bearer ' + localStorage.getItem('token') }
})
http.interceptors.request.use(function (request) {
  return request
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})
http.interceptors.response.use(function (response) {
  const request = response.config
  if (config.debug.http) {
    console.log(
      '>>>', request.method.toUpperCase(), request.url, request.params,
      '\n   ', response.status, response.data
    )
  }
  return response
}, function (error) {
  if (config.debug.http) {
    let { response, config: request } = error
    if (request) {
      console.log(
        '>>>', request.method.toUpperCase(), request.url, request.params,
        '\n   ', response.status, response.data
      )
    }
  }
  // Do something with response error
  return Promise.reject(error)
})
Vue.prototype.$http = http

6)在package.json中我添加了adminify / package.json中的依赖项,所以现在我的/package.json有内容:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },

    "dependencies": {
        "adonis-websocket-client": "^1.0.2",
        "babel-runtime": "^6.23.0",
        "i": "^0.3.5",
        "indicative": "^2.2.1",
        "vue": "^2.3.3",
        "vue-i18n": "^6.1.1",
        "vue-quill-editor": "^2.1.6",
        "vue-router": "^2.3.1",
        "vue-timeago": "^3.3.1",
        "vue2-dropzone": "^2.0.0"
    },

    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "popper.js": "^1.12",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7"

        "Validator": "^1.0.4",
        "autoprefixer": "^6.7.2",
        "axios-mock-adapter": "^1.8.1",
        "babel-core": "^6.22.1",
        "babel-eslint": "^7.1.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",
        "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",
        "indicative": "^2.2.1",
        "mockjs": "^1.0.1-beta3",
        "opn": "^4.0.2",
        "optimize-css-assets-webpack-plugin": "^1.3.0",
        "ora": "^1.2.0",
        "pug": "^2.0.0-rc.1",
        "rimraf": "^2.6.0",
        "semver": "^5.3.0",
        "shelljs": "^0.7.6",
        "style-loader": "^0.13.1",
        "stylus": "^0.54.5",
        "stylus-loader": "^2.1.1",
        "url-loader": "^0.5.8",
        "vue-loader": "^12.1.0",
        "vue-style-loader": "^3.0.1",
        "vue-template-compiler": "^2.3.3",
        "vuetify": "^0.14",
        "vuex": "^2.3.1",
        "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"
    }

}

7)之后我跑

$ npm install
npm WARN The package vue is included as both a dev and production dependency.
npm WARN The package indicative is included as both a dev and production dependency.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

8)和最后:

$ npm run watch-poll   

> @ watch-poll /mnt/_work_sdb8/wwwroot/lar/Songs
> npm run watch -- --watch-poll


> @ watch /mnt/_work_sdb8/wwwroot/lar/Songs
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch-poll"

 10% building modules 1/1 modules 0 active                                         
Webpack is watching the files…

 78% advanced chunk optimization/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/dist/index.js:188
            chunk.sortModules();
                  ^

TypeError: chunk.sortModules is not a function
    at /mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/dist/index.js:188:19
    at /mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/async/dist/async.js:3096:16
    at eachOfArrayLike (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/async/dist/async.js:1055:9)
    at eachOf (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/async/dist/async.js:1103:5)
    at Object.eachLimit (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/async/dist/async.js:3158:5)
    at Compilation.<anonymous> (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/laravel-mix/node_modules/extract-text-webpack-plugin/dist/index.js:184:27)
    at Compilation.applyPluginsAsyncSeries (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/tapable/lib/Tapable.js:206:13)
    at Compilation.seal (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/webpack/lib/Compilation.js:579:8)
    at /mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/webpack/lib/Compiler.js:493:16
    at /mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/tapable/lib/Tapable.js:289:11
    at _addModuleChain (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/webpack/lib/Compilation.js:481:11)
    at processModuleDependencies.err (/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/webpack/lib/Compilation.js:452:13)
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch-poll"`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/serge/.npm/_logs/2018-03-07T12_24_13_366Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ watch-poll: `npm run watch -- --watch-poll`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ watch-poll script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/serge/.npm/_logs/2018-03-07T12_24_13_388Z-debug.log

内容018-03-07T12_33_56_015Z-debug.log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'development' ]
2 info using npm@5.6.0
3 info using node@v8.9.4
4 verbose run-script [ 'predevelopment', 'development', 'postdevelopment' ]
5 info lifecycle @~predevelopment: @
6 info lifecycle @~development: @
7 verbose lifecycle @~development: unsafe-perm in lifecycle true
8 verbose lifecycle @~development: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/.bin:/usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/mnt/_work_sdb8/wwwroot/lar/Songs/node_modules/.bin:/home/serge/.composer/vendor/bin:/home/serge/.composer/vendor/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
9 verbose lifecycle @~development: CWD: /mnt/_work_sdb8/wwwroot/lar/Songs
10 silly lifecycle @~development: Args: [ '-c',
10 silly lifecycle   'cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js' ]
11 silly lifecycle @~development: Returned: code: 1  signal: null
12 info lifecycle @~development: Failed to exec development script
13 verbose stack Error: @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:285:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid @
15 verbose cwd /mnt/_work_sdb8/wwwroot/lar/Songs
16 verbose Linux 4.13.0-36-generic
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "development"
18 verbose node v8.9.4
19 verbose npm  v5.6.0
20 error code ELIFECYCLE
21 error errno 1
22 error @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
22 error Exit status 1
23 error Failed at the @ development script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

1 个答案:

答案 0 :(得分:0)

您的网络包配置存在问题。有两种选择:

修复导入

  • ./resources/assets/js/i18n/index.js

    替换:

    import config from '@/config'
    

    使用:

    import config from '../config'
    
  • /resources/assets/js/main.js

    替换:

    import '@/styles/main.styl'
    

    使用:

    import './styles/main.styl'
    

尝试以上方法。如果它不起作用,撤消它并尝试下面的那个。


替代方案:更改webpack配置

如果您要尝试此选项,请撤消上面建议的更改。

要更新您的网络包配置,请使用 webpack.mix.js ,例如:

let mix = require('laravel-mix');

mix.js('resources/assets/js/main.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

添加mix.webpackConfig({,使其像:

let mix = require('laravel-mix');

mix.webpackConfig({
    resolve:{
        /* Path Shortcuts */
        alias:{
            '@': path.resolve(__dirname, 'resources/assets/js')
        }
    }
})

mix.js('resources/assets/js/main.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');