Module not found: Error: Can't resolve './components/Testc.vue'

Question

问题描述

Module not found: Error: Can't resolve './components/Testc.vue'

问题出现的环境背景及自己尝试过哪些方法

第一次用webpack+vue

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
webpack.config.js:

// nodejs 中的path模块
var path = require('path');
const VueLoaderPlugin=require('vue-loader/lib/plugin');

module.exports = {
    // 入口文件，path.resolve()方法，可以结合我们给定的两个参数最后生成绝对路径，最终指向的就是我们的index.js文件
    entry: path.resolve(__dirname,'./index.js'),
    // 输出配置
    output: {
        // 输出路径是 myProject/output/static
        path: path.resolve(__dirname,'./output'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['*', '.js', '.vue']
    },
    plugins:[
        new VueLoaderPlugin()
    ],
    module: {
        
        rules: [
            // 使用vue-loader 加载 .vue 结尾的文件
            {
                test: /\.vue$/, 
                loader: 'vue-loader'   
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    }
};

package.json

{
  "devDependencies": {
    "@babel/core": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "babel-loader": "^8.0.4",
    "css-loader": "^2.0.0",
    "file-loader": "^2.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue": "^2.5.21",
    "vue-loader": "^15.4.2",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-serve": "^2.0.3"
  }
}

index.js:

/**
 * 
 * @authors Your Name ([e-mail])
 * @date    2018-12-12 10:33:23
 * @version $Id$
 */
import Vue from 'Vue'
import Testc from './components/Testc.vue'

new Vue({
    el:'body',
    components:{
        Testc
    }
})

Testc:

<template>
    <div v-for="n in 10">div</div>
</template>

<script>
    export default{
        date(){
            return{
                msg:'hello world'
            }
        }
    }
</script>

<style>
    html{
    background:red;
    }
</style>

运行 npx webpack-cli 报错

你期待的结果是什么？实际看到的错误信息又是什么？

Module not found: Error: Can't resolve './components/Testc.vue'

Answer 1

找到原因了，是路径的问题，sublime的目录结构误导了我，index.js和src都是在根目录结构下，但是看起来index.js却是在src下的。

Answer 2

npx webpack-cli 你这命令是干嘛的

Answer 3

import Testc from './components/Testc'

应该是去掉.vue 的吧