Typescript 的 Vue。错误：找不到模块：错误：无法解析“./components/mycomponent.vue”答案

【问题标题】：Vue of Typescript. Error: Module not found: Error: Can't resolve './components/mycomponent.vue'Typescript 的 Vue。错误：找不到模块：错误：无法解析“./components/mycomponent.vue”
【发布时间】：2018-05-02 23:50:50
【问题描述】：

我正在使用 vue of typescript 以及 Express 中的 typescript。一切正常，直到我想在 vue.js 中使用单个文件组件。这是我的组件，

<template>
  <div>This is a simple component. {{msg}}</div> 
</template>

<script lang='ts'>
export default {
  data() {
    return {
      msg: "you"
    }
  }
}
</script>

我的 webpack 文件，

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPugPlugin = require('html-webpack-pug-plugin');
const Webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        bundle: [
            './node_modules/bootstrap/dist/js/bootstrap.js',
            './dist/web/views/common/client/ts/_main.js',
            './web/views/common/client/style/main.scss'
        ]
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: '[name].js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        ts: 'ts-loader'
                    },
                    esModule: true
                }
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [{
                        loader: 'css-loader',
                        options: {
                            minimize: false
                        }
                    }, {
                        loader: 'sass-loader'
                    }]
                })
            },
            {
                test: require.resolve('jquery'),
                loader: 'expose-loader?$!expose-loader?jQuery'
            }
        ]
    },
    resolve: {
        alias: {
            vue$: 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
        new HtmlWebpackPlugin({
            template: './web/views/common/_layout.pug',
            filename: '../web/views/common/layout.pug',
            filetype: 'pug'
        }),
        new HtmlWebpackPugPlugin(),
        new Webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            Popper: 'popper.js'
        })
    ]
};

如果我不使用单文件组件，一切正常，但是当我引入 .vue 文件时，它会显示此错误，

./dist/web/views/about/client/ts/_aboutController.js 中的错误找不到模块：错误：无法在“/Users/george/github/bochure/dist/web/views/about/client/ts”中解析“./components/mycomponent.vue” @ ./dist/web/views/about/client/ts/_aboutController.js 4:24-63 @ ./dist/web/views/common/client/ts/_main.js @multi ./node_modules/bootstrap/dist/js/bootstrap.js ./dist/web/views/common/client/ts/_main.js ./web/views/common/client/style/main.scss

谁能帮帮我？您也可以在 github 上下载我的源代码并帮助我。非常感谢。

git@github.com:geforcesong/bochure.git

【问题讨论】：

标签： vue.js

【解决方案1】：

尝试改变

'./components/mycomponent.vue'

'../components/mycomponent.vue'

这在某些情况下可能有效。

【讨论】：

【解决方案2】：

我建议你先检查组件路径。如果您将一个 vue 组件嵌入到另一个组件中，请检查两者是否在 同一目录级别。

如果是，那么您可以使用 './component-name.vue' 并且一切顺利。

【讨论】：