[英]vuejs 2 : npm ERR! Could not install from “@/config” as
I have : 我有 :
$ nodejs --version
v8.9.4
$ npm --version
5.6.0
I try to join that https://github.com/wxs77577/adminify vuejs/vuetify template with latest laravel. 我尝试使用最新的laravel加入该https://github.com/wxs77577/adminify vuejs / vuetify模板。 I do as next: 1) laravel new Songs
接下来,我要做的是:1)laravel新歌
2) cd Songs 2)cd歌曲
php artisan --version
Laravel Framework 5.6.8
3) I copied all files from adminify/src/ into /resources/assets/js/ in Songs project folder 3)我将所有文件从adminify / src /复制到Songs项目文件夹中的/ resources / assets / js /中
4) I modified my webpack.mix.js as : 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) Into my resources/assets/js/http.js I added axios headers configuration from Laravel's resources/assets/js/bootstrap.js, so it has content : 5)在我的resources / assets / js / http.js中,我从Laravel的resources / 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) In package.json I added dependencies from adminify/package.json, so now my /package.json has content : 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) After that I run 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) and last : 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
Content of 018-03-07T12_33_56_015Z-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 ]
You have a problem with your webpack configuration. 您的webpack配置有问题。 A couple of options:
有两个选择:
In ./resources/assets/js/i18n/index.js
: 在
./resources/assets/js/i18n/index.js
:
Replace: 更换:
import config from '@/config'
with: 与:
import config from '../config'
And in /resources/assets/js/main.js
: 在
/resources/assets/js/main.js
:
Replace: 更换:
import '@/styles/main.styl'
with: 与:
import './styles/main.styl'
Try the above. 尝试以上。 If it doesn't work, undo it and try the one below.
如果它不起作用,请撤消它,然后尝试以下一种方法。
If you are going to try this option, undo the suggested changes above. 如果要尝试此选项,请撤消上面建议的更改。
To update your webpack config, in your webpack.mix.js
, which is like: 要更新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');
Add a mix.webpackConfig({
, making it like: 添加
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');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.