problem description
vue2.9.6 init"s project npm start failed:
npm run dev
vuecli_demo@1.0.0 dev E:usualcodevuecli_demo
webpack-dev-server-inline-progress-config build/webpack.dev.conf.js
E:usualcodevuecli_demobuildutils.js:85
exports.createNotifierCallback = () = > {
^^
ReferenceError: Invalid left-hand side in assignment
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:599:28)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (E:\usual\code\vuecli_demo\build\webpack.dev.conf.js:2:15) npm ERR! Code ELIFECYCLE
npm ERR! Errno 1
npm ERR! Vuecli_demo@1.0.0 dev: webpack-dev-server-inline-progress-config build/webpack.dev.conf.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vuecli_demo@1.0.0 dev 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! D:Nodenode_cache_logs2019-01-02T17_19_36_520Z-debug.log
npm ERR! Code ELIFECYCLE
npm ERR! Errno 1
npm ERR! Vuecli_demo@1.0.0 start: npm run dev
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vuecli_demo@1.0.0 start 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! D:Nodenode_cache_logs2019-01-02T17_19_36_601Z-debug.log
the environmental background of the problems and what methods you have tried
I updated webpack_dev_server according to some methods on the Internet, tried 2.9.6 and the latest version, but failed;
I also followed other methods, such as changing localhost to local IP, etc., but also failed
related codes
/ / Please paste the code text below (do not replace the code with pictures)
see webpack.dev.conf.js:
"use strict"
const utils = require (". / utils")
const webpack = require ("webpack")
const config = require (". / config")
const merge = require ("webpack-merge")
const path = require (" path")
const baseWebpackConfig = require (". / webpack.base.conf")
const CopyWebpackPlugin = require ")
const HtmlWebpackPlugin = require (" html-webpack-plugin")
const FriendlyErrorsPlugin = require ("friendly-errors-webpack-plugin")
const portfinder = require (" portfinder")
const HOST = "localhost"
const PORT =" 8080"
const devWebpackConfig = merge (baseWebpackConfig, {
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })},
/ / cheap-module-eval-source-map is faster for development
devtool: config.dev.devtool,
/ / these devServer options should be customized in / config/index.js
devServer: {
clientLogLevel: "warning",
historyApiFallback: {
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, "index.html") },
],
},
hot: true,
contentBase: false, // since we use CopyWebpackPlugin.
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
watchOptions: {
poll: config.dev.poll,
}},
plugins: [
new webpack.DefinePlugin({
"process.env": require("../config/dev.env")
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: "index.html",
template: "index.html",
inject: true
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, "../static"),
to: config.dev.assetsSubDirectory,
ignore: [".*"]
}
])]
})
module.exports = new Promise ((resolve, reject) = > {
portfinder.basePort = process.env.PORT | | config.dev.port
portfinder.getPort ((err, port) = > {
if (err) {
reject(err)
} else {
// publish the new Port, necessary for e2e tests
process.env.PORT = port
// add port to devServer config
devWebpackConfig.devServer.port = port
// Add FriendlyErrorsPlugin
devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
compilationSuccessInfo: {
messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
},
onErrors: config.dev.notifyOnErrors
? utils.createNotifierCallback()
: undefined
}))
resolve(devWebpackConfig)
}})
});
package.json is as follows:
{
"name": "vuecli_demo",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "pengpengWu",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.7",
"webpack-merge": "^4.1.0"},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"]
}