编译App.vue 文件 报错

webpack.config.js

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
    mode: 'development',
    entry: './src/main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve('./dist')
    },
    module: {
        rules: [
            {test:/\.js$/, use:'babel-loader',exclude:/node_modules/},
            {test:/\.css$/,use:['style.loader','css-loader']},
            {test:/\.less$/,use:['style.loader','css-loader','less-loader']},
            {test:/\.(jpg|png|gif|jpeg)/,use:'url-loader?limit=8192'},
            {test:/\.vue$/,use:'vue-loader'}

        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        }),
        new VueLoaderPlugin()
    ]
};

main.js

import Vue from 'vue';
import App from './App.vue';
console.log(App);
new Vue({
    render: (h)=>h(App)
}).$mount('#app');

App.vue

<template>
    <h1>
        <span>hello</span>
    </h1>
</template>
<script>
    export default {
        data() {
            return {}
        },
        methods: {},
        computed: {},
        components: {}
    }
</script>
<style scoped>
    span{
        color: #ff6700;
    }
</style>

运行npm run dev报错如下:

ERROR in ./src/App.vue
Module not found: Error: Can't resolve 'style.loader' in 'D:\Git-vue\test-day6'
 @ ./src/App.vue 4:0-87
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@3.1.7@webpack-dev-server/client?http://localhost:8080 ./src/main.js

把App.vue文件中的style标签注释掉就没问题?是什么原因?

阅读 3.5k
2 个回答

报错说的比较明显,找不到模块,要看看是不是没装。其次你是不是写错了 应该是style-loader吧

ERROR in ./src/App.vue
Module not found: Error: Can't resolve 'style.loader' in 'D:Git-vuetest-day6'
@ ./src/App.vue 4:0-87
@ ./src/main.js
@ multi ./node_modules/_webpack-dev-server@3.1.7@webpack-d

            {test:/\.css$/,use:['style.loader','css-loader']},
            {test:/\.less$/,use:['style.loader','css-loader','less-loader']},

你声明要用style.loader然后自己没装这个package吧。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题