问答详情
源自:-

运行npm run build报错

ERROR in ./src/app.vue?vue&type=style&index=0&lang=css

Module parse failed: Unexpected character '#' (16:0)

You may need an appropriate loader to handle this file type.

|

|

| #test{

|     color: red;

| }

 @ ./src/app.vue 4:0-62

 @ ./src/index.js


ERROR in ./src/app.vue?vue&type=template&id=bced26ea

Module parse failed: Unexpected token (2:0)

You may need an appropriate loader to handle this file type.

|

| <div id="test">{{test}}</div>

|

 @ ./src/app.vue 1:0-81 11:2-8 12:2-17

 @ ./src/index.js


ERROR in ./src/app.vue

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

 @ ./src/index.js 2:0-28 8:19-22


ERROR in ./src/app.vue?vue&type=template&id=bced26ea

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

 @ ./src/app.vue 1:0-81 11:2-8 12:2-17

 @ ./src/index.js


ERROR in ./src/app.vue?vue&type=script&lang=js

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

 @ ./src/app.vue 2:0-54 3:0-49 3:0-49 10:2-8

 @ ./src/index.js


ERROR in ./src/app.vue?vue&type=style&index=0&lang=css

vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

 @ ./src/app.vue 4:0-62

 @ ./src/index.js

npm ERR! code ELIFECYCLE

npm ERR! errno 2

npm ERR! webtest@1.0.0 build: `webpack --config webpack.config.js --mode production`

npm ERR! Exit status 2

npm ERR!

npm ERR! Failed at the webtest@1.0.0 build 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!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2018-05-14T08_01_24_420Z-debug.log


D:\wxq\myPro\elm\webtest>


提问者:xianqirose 2018-05-14 16:17

个回答

  • 思吾谓何思
    2018-05-14 20:18:20

    补充一下,我刚看了一下vue-loader的文档

    应该是vue-loader的版本从14.x开始就需要这样做了,与webpack版本没什么关系

    ```

    // webpack.config.jsconst path = require('path')const VueLoaderPlugin = require('vue-loader/lib/plugin')module.exports = {
      mode: 'development',
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          },
          // this will apply to both plain `.js` files
          // AND `<script>` blocks in `.vue` files
          {
            test: /\.js$/,
            loader: 'babel-loader'
          },
          // this will apply to both plain `.css` files
          // AND `<style>` blocks in `.vue` files
          {
            test: /\.css$/,
            use: [
              'vue-style-loader',
              'css-loader'
            ]
          }
        ]
      },
      plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin()
      ]}

    ```

    文档地址:https://vue-loader.vuejs.org/guide/


  • 思吾谓何思
    2018-05-14 20:06:40

    有这个错误,想来你的webpack版本应该是4.x,看时间应该是4.8的版本

    解决办法

    在webpack的baseconfig里面

    先引入vue-loader的plugin

    const VueLoaderPlugin = require('vue-loader/lib/plugin')

    然后在

    plugins: [

        new VueLoaderPlugin()

    ]