我正在使用Typescript和Vuejs来构建一个应用程序 . 我有几个独立的组件(.vue)文件,我将其导入到Typescript(.ts)文件中 . 在Typescript文件中,我从npm Vue库导入Vue,然后创建一个新的Vue来显示我的组件 . 我看到的错误是:
'Vue'类型中不存在属性x
我的构建系统是带有tsc的Webpack . 为什么我会收到此错误,如何解决?
main.ts
import Vue from 'vue';
import Competency from '../components/competency.vue';
new Vue({
el: "#app",
components: {
'competency': Competency
},
data:{
count: 0
},
methods:{
initialize: function(){
this.count = count + 1; // Errors here with Property count does not exist on type vue
}
}
})
tsconfig
{
"compilerOptions": {
// "allowJs": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
"lib": [
"es2015",
"dom",
"es2015.promise"
],
"module": "es2015",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
//"outDir": "./build/",
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"exclude": [
"./node_modules",
"wwwroot",
"./Model"
],
"include": [
"./CCSEQ",
"./WebResources"
]
}
webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: {
Evaluations: './WebResources/js/main.ts'
},
devServer: {
contentBase: './dist'
},
module: {
rules: [{
test: /\.ts$/,
exclude: /node_modules|vue\/src/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: true
}
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
]
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
filename: 'Evaluations.html',
template: './WebResources/html/Evaluations.html'
}), new HtmlWebpackPlugin({
filename: 'ExpenseUpload.html',
template: './WebResources/html/ExpenseUpload.html'
}), new webpack.optimize.CommonsChunkPlugin({
name: 'WebAPI'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
4 回答
我遇到了类似的问题(特别是在.vue文件中) . 我确实发现这似乎解决了问题 . 在导入.vue文件的任何位置,将ES6样式“import”更改为“require” .
所以在你的例子中,改变:
至...
你应该为import * .vue文件声明一个 .
如:
我试图按照这个页面https://vuejs.org/v2/guide/routing.html并得到相同的TypeScript错误,我通过强制转换Vue实例来修复它
我在vue 2.8.2和Typescript 2.5.3中遇到了同样的错误 . 我通过将Vue实例保存在变量中然后给它一个类型来修复它 . 这可确保TS在使用选项对象进行实例化时了解所有Vue属性 .