还是出错了

还是出错了

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'babel-polyfill';
import Vue from 'vue';
import App from './App';
import router from './router';
import fastclick from 'fastclick';

import './assets/scss/index.scss';

fastclick.attach(document.body);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

index.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>Vue实现慕淘商城</title>
    <link href="//gw.alicdn.com/tps/i2/TB1nmqyFFXXXXcQbFXXE5jB3XXX-114-114.png" rel="Shortcut Icon" type="image/x-icon">
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue

<template>
  <div id="app">
    app
  </div>
</template>

<script>
  export default {
    name: 'App'
  };
</script>

index.js

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: []
});

webpack.base.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'api': resolve('src/api'),
      'assets': resolve('src/assets'),
      'base': resolve('src/base'),
      'components': resolve('src/components'),
      'pages': resolve('src/pages')
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

http://img1.sycdn.imooc.com//climg/5d8c8fc40957dad311850542.jpg

http://img1.sycdn.imooc.com//climg/5d8c8fc40969e65612900693.jpg


正在回答

登陆购买课程后可参与讨论,去登陆

9回答

同学你好,看你的截图,项目已经成功启动, 没有报错了。如下图所示,这些是是eslint检测之后的警告信息,不影响程序的运行效果,可以不用管哦

http://img1.sycdn.imooc.com//climg/5d8d8af10930259906660516.jpg

如果想要不显示这些警告,可以关闭配置中:

http://img1.sycdn.imooc.com//climg/5d8d8b4f09bcfe2307470519.jpg

http://img1.sycdn.imooc.com//climg/5d8d8b590913f37b08300232.jpg

然后重新启动项目就可以啦。

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~


提问者 Gavinnn 2019-09-27 10:57:58
提问者 Gavinnn 2019-09-27 10:55:41
[HMR] Waiting for update signal from WDS...
vue.runtime.esm.js?12a6:8423 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
client?0edb:147 [WDS] Warnings while compiling.
warnings @ client?0edb:147
onmessage @ socket.js?0d5e:41
EventTarget.dispatchEvent @ sockjs.js?0d3a:170
(anonymous) @ sockjs.js?0d3a:887
SockJS._transportMessage @ sockjs.js?0d3a:885
EventEmitter.emit @ sockjs.js?0d3a:86
WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961
client?0edb:153 ./src/App.vue

  ✘  http://eslint.org/docs/rules/no-multiple-empty-lines  More than 1 blank line not allowed                         
  src\App.vue:11:1
  
   ^

  ✘  https://google.com/#q=vue%2Fscript-indent             Expected indentation of 2 spaces but found 3 spaces        
  src\App.vue:15:1
     import CTabbar from 'components/tabber';
   ^

  ✘  https://google.com/#q=vue%2Fscript-indent             Expected indentation of 2 spaces but found 3 spaces        
  src\App.vue:16:1
     export default {
   ^

  ✘  https://google.com/#q=vue%2Fscript-indent             Expected indentation of 4 spaces but found 5 spaces        
  src\App.vue:18:1
       components: {
   ^

  ✘  https://google.com/#q=vue%2Fscript-indent             Expected indentation of 4 spaces but found 5 spaces        
  src\App.vue:20:1
       }
   ^

  ✘  http://eslint.org/docs/rules/no-multiple-empty-lines  Too many blank lines at the end of file. Max of 0 allowed  
  src\App.vue:23:1
  
   ^


✘ 6 problems (6 errors, 0 warnings)


Errors:
  4  https://google.com/#q=vue%2Fscript-indent
  2  http://eslint.org/docs/rules/no-multiple-empty-lines
 @ ./src/main.js 2:0-24
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
warnings @ client?0edb:153
onmessage @ socket.js?0d5e:41
EventTarget.dispatchEvent @ sockjs.js?0d3a:170
(anonymous) @ sockjs.js?0d3a:887
SockJS._transportMessage @ sockjs.js?0d3a:885
EventEmitter.emit @ sockjs.js?0d3a:86
WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961
client?0edb:153 ./src/pages/home/index.vue

  ✘  http://eslint.org/docs/rules/quotes  Strings must use singlequote  
  src\pages\home\index.vue:13:26
    import HomeHeader from "./header";
                            ^

  ✘  http://eslint.org/docs/rules/semi    Missing semicolon             
  src\pages\home\index.vue:20:4
    }
      ^


✘ 2 problems (2 errors, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/semi
  1  http://eslint.org/docs/rules/quotes
 @ ./src/router/index.js 16:11-31 35:11-31
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
warnings @ client?0edb:153
onmessage @ socket.js?0d5e:41
EventTarget.dispatchEvent @ sockjs.js?0d3a:170
(anonymous) @ sockjs.js?0d3a:887
SockJS._transportMessage @ sockjs.js?0d3a:885
EventEmitter.emit @ sockjs.js?0d3a:86
WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961
client?0edb:153 ./src/base/navbar/index.vue

  ✘  http://eslint.org/docs/rules/semi  Missing semicolon  
  src\base\navbar\index.vue:18:4
    }
      ^


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/semi
 @ ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/pages/home/header.vue 8:0-35
 @ ./src/pages/home/header.vue
 @ ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/pages/home/index.vue
 @ ./src/pages/home/index.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
warnings @ client?0edb:153
onmessage @ socket.js?0d5e:41
EventTarget.dispatchEvent @ sockjs.js?0d3a:170
(anonymous) @ sockjs.js?0d3a:887
SockJS._transportMessage @ sockjs.js?0d3a:885
EventEmitter.emit @ sockjs.js?0d3a:86
WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961
client?0edb:153 ./src/components/tabber/index.vue

  ✘  http://eslint.org/docs/rules/semi  Missing semicolon  
  src\components\tabber\index.vue:25:4
    }
      ^


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/semi
 @ ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 15:0-40
 @ ./src/App.vue
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
warnings @ client?0edb:153
onmessage @ socket.js?0d5e:41
EventTarget.dispatchEvent @ sockjs.js?0d3a:170
(anonymous) @ sockjs.js?0d3a:887
SockJS._transportMessage @ sockjs.js?0d3a:885
EventEmitter.emit @ sockjs.js?0d3a:86
WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961
client?0edb:153 ./src/pages/cart/index.vue

  ✘  http://eslint.org/docs/rules/semi  Missing semicolon  
  src\pages\cart\index.vue:10:4
    }
      ^


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/semi
 @ ./src/router/index.js 29:11-31
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
warnings @ client?0edb:153
onmessage @ socket.js?0d5e:41
EventTarget.dispatchEvent @ sockjs.js?0d3a:170
(anonymous) @ sockjs.js?0d3a:887
SockJS._transportMessage @ sockjs.js?0d3a:885
EventEmitter.emit @ sockjs.js?0d3a:86
WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961
client?0edb:153 ./src/pages/home/header.vue

  ✘  http://eslint.org/docs/rules/semi  Missing semicolon  
  src\pages\home\header.vue:17:4
    }
      ^


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/semi
 @ ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/pages/home/index.vue 13:0-34
 @ ./src/pages/home/index.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
warnings @ client?0edb:153
onmessage @ socket.js?0d5e:41
EventTarget.dispatchEvent @ sockjs.js?0d3a:170
(anonymous) @ sockjs.js?0d3a:887
SockJS._transportMessage @ sockjs.js?0d3a:885
EventEmitter.emit @ sockjs.js?0d3a:86
WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961
client?0edb:153 ./src/pages/personal/index.vue

  ✘  http://eslint.org/docs/rules/semi  Missing semicolon  
  src\pages\personal\index.vue:10:4
    }
      ^


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/semi
 @ ./src/router/index.js 41:11-35
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
warnings @ client?0edb:153
onmessage @ socket.js?0d5e:41
EventTarget.dispatchEvent @ sockjs.js?0d3a:170
(anonymous) @ sockjs.js?0d3a:887
SockJS._transportMessage @ sockjs.js?0d3a:885
EventEmitter.emit @ sockjs.js?0d3a:86
WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961
client?0edb:153 ./src/pages/product/index.vue

  ✘  http://eslint.org/docs/rules/semi  Missing semicolon  
  src\pages\product\index.vue:10:4
    }
      ^


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/semi
 @ ./src/router/index.js 22:13-36
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
warnings @ client?0edb:153
onmessage @ socket.js?0d5e:41
EventTarget.dispatchEvent @ sockjs.js?0d3a:170
(anonymous) @ sockjs.js?0d3a:887
SockJS._transportMessage @ sockjs.js?0d3a:885
EventEmitter.emit @ sockjs.js?0d3a:86
WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961
client?0edb:153 ./src/pages/search/index.vue

  ✘  http://eslint.org/docs/rules/semi  Missing semicolon  
  src\pages\search\index.vue:10:4
    }
      ^


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/semi
 @ ./src/router/index.js 47:11-33
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@2.11.5@webpack-dev-server/client?http://0.0.0.0:8080 webpack/hot/dev-server ./src/main.js
warnings @ client?0edb:153
onmessage @ socket.js?0d5e:41
EventTarget.dispatchEvent @ sockjs.js?0d3a:170
(anonymous) @ sockjs.js?0d3a:887
SockJS._transportMessage @ sockjs.js?0d3a:885
EventEmitter.emit @ sockjs.js?0d3a:86
WebSocketTransport.ws.onmessage @ sockjs.js?0d3a:2961

http://img1.sycdn.imooc.com//climg/5d8d7a290915372c05700377.jpg

好帮手慕慕子 2019-09-27 10:35:39

同学你好, 如下图所示, 报错信息有三个错误

  1. fastclick插件的问题

  2. babel-polyfill插件的问题

  3. sass-loader插件的问题

http://img1.sycdn.imooc.com//climg/5d8d733109e6b45512010601.jpg

看同学的package.json文件, 已经安装了fastclick和babel-polyfill插件, 但是同时安装了两个sass-loader,一个高版本,一个低版本, 建议: 可以尝试npm (或cnpm)  install -D sass-loader@6.0.7命令。 将sass-loader都降为低版本的试试

http://img1.sycdn.imooc.com//climg/5d8d74170968375a06420799.jpg

遇到问题不要着急哦, 因为vue项目涉及到环境、版本等问题,老师这边无法准确的复现同学项目出现的问题, 所以需要同学和老师好好配合哦,如果还有问题, 可以在提问次,使用node -v 和vue -V命令 查看一下自己电脑环境中的vue版本和node版本,截图粘贴过来, 老师一定会想办法帮助您解决问题的

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

  • 提问者 Gavinnn #1
    昨天弄了好久没解决,有点无奈。翻了下问答区,今早我用源码全部替换掉,删了node_modules重新安装npm install,我把警告,vue版本和node版本都发出来,,,,
    2019-09-27 10:53:18
提问者 Gavinnn 2019-09-26 20:24:21
提问者 Gavinnn 2019-09-26 19:59:25

http://img1.sycdn.imooc.com//climg/5d8ca7bb09fc0cc313660768.jpg

http://img1.sycdn.imooc.com//climg/5d8ca7bb09249a3d12750694.jpg

{
  "name": "mall",
  "version": "1.0.0",
  "description": "在线商城Webapp",
  "author": "Mikonnnn <1551005987@qq.com>",
  "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": {
    "babel-polyfill": "^6.26.0",
    "fastclick": "^1.0.6",
    "sass-loader": "^6.0.7",
    "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",
    "node-sass": "^4.12.0",
    "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",
    "sass-loader": "^8.0.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.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

http://img1.sycdn.imooc.com//climg/5d8ca81009a84ab302670508.jpg

http://img1.sycdn.imooc.com//climg/5d8ca81a0915c05f02700768.jpg


好帮手慕慕子 2019-09-26 19:11:06

同学你好, 看你的截图,报错原因是找不到对应的index.scss文件。 

  1. 可能是由于引入index.scss文件的路径不对。 建议:同学可以检查一下引入文件的路径是否正确

  2. 可能没有安装好node-sass插件, 建议: 可以尝试一下npm (或cnpm)  install --save-dev node-sass命令安装插件

如果还有问题, 建议: 同学可以将你的项目目录截图, 以及package.json文件代码粘贴过来, 便于老师准确的帮助同学定位与解决问题哦

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~

  • 提问者 Gavinnn #1
    import './assets/scss/index.scss'; 重新按照视频中的步骤,一一对应还是出错了,也不知道是不是依赖少安装了什么。。
    2019-09-26 20:06:56
提问者 Gavinnn 2019-09-26 18:49:56


http://img1.sycdn.imooc.com//climg/5d8c97bd093328be12900694.jpg

http://img1.sycdn.imooc.com//climg/5d8c97bd0900d31d11510583.jpg

减低了版本,还是出错

好帮手慕慕子 2019-09-26 18:46:06

同学你好, 看同学控制台报错信息, 可能是由于sass-loader版本太高引起的。 可以在命令行输入npm (或cnpm)  install --save sass-loader@6.0.7降低下版本试试

如果还有疑问, 可以再次提问, 我们会继续帮助您解答的

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~



  • 提问者 Gavinnn #1
    减低了版本,还是出错
    2019-09-26 18:50:18
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师