我正在使用打字稿的vue和Express中的打字稿。一切正常,直到我想在vue.js中使用单个文件组件。 这是我的组件,
<template>
<div>This is a simple component. {{msg}}</div>
</template>
<script lang='ts'>
export default {
data() {
return {
msg: "you"
}
}
}
</script>
&#13;
我的网络包文件
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'
})
]
};
&#13;
如果我不使用单个文件组件,一切正常,但是当我介绍.vue文件时,它会显示此错误,
./dist/web/views/about/client/ts/_aboutController.js中的错误 找不到模块:错误:无法解析&#39; ./ components / mycomponent.vue&#39; in&#39; / Users / george / github / bochure / dist / web / views / about / client / ts&#39; @ ./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
答案 0 :(得分:0)
我建议您先检查组件路径。 如果要将一个vue组件嵌入到另一个vue组件中,请检查两者是否都在相同的目录级别。
如果是,那么您可以使用&#39; ./ component-name.vue&#39;你会很高兴。
答案 1 :(得分:0)
尝试更改
'./components/mycomponent.vue'
'../components/mycomponent.vue'
在某些情况下这可能会起作用。