                        课程
                    
                        /前端开发
                        
                            /前端工具
                        
                        /Vue+Webpack打造todo应用

运行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

源自：Vue+Webpack打造todo应用

关注问题我要回答

3202

操作

收起

2 回答

思吾谓何思
2018-05-14

补充一下，我刚看了一下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/