本文介绍了解决“类型 'Vue' 上不存在属性";错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 Typescript 和 Vuejs 来构建应用程序.我有几个独立的组件 (.vue) 文件,我将它们导入到 Typescript (.ts) 文件中.在 Typescript 文件中,我从 npm Vue 库中导入 Vue,然后创建一个新的 Vue 来显示我的组件.我看到的错误是:
属性 x 在类型Vue"上不存在
我的构建系统是带有 tsc 的 Webpack.为什么我会收到此错误,我该如何解决?
main.ts
从'vue'导入Vue;从'../components/competency.vue'导入能力;新的 Vue({el: "#app",成分: {能力":能力},数据:{计数:0},方法:{初始化:函数(){this.count = 计数 + 1;//此处的属性计数错误在类型 vue 上不存在}}})
tsconfig
{编译器选项":{//"allowJs": 真,allowSyntheticDefaultImports":真,"experimentalDecorators": 真,库":["es2015","dom",es2015.promise"],模块":es2015","moduleResolution": "节点",noEmitOnError":真,noImplicitAny":假,//"outDir": "./build/",删除评论":假,"sourceMap": 真,目标":es5"},排除": ["./node_modules","wwwroot",./模型"],包括": ["./CCSEQ",./网络资源"]}
webpack.config.js
const path = require('path');const webpack = require('webpack');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');模块.出口 = {入口: {评估:'./WebResources/js/main.ts'},开发服务器:{内容库:'./dist'},模块: {规则:[{测试:/\.ts$/,排除:/node_modules|vue\/src/,loader: 'ts-loader',排除:/node_modules/,选项: {appendTsSuffixTo: [/\.vue$/]}},{测试:/\.vue$/,loader: 'vue-loader',选项: {esModule: 真}},{测试:/\.css$/,用: ['样式加载器','css加载器']},{测试:/\.(png|svg|jpg|gif)$/,用: ['文件加载器']},]},解决: {扩展名:[".tsx", ".ts", ".js"],别名:{'vue$': 'vue/dist/vue.esm.js'}},插件: [new CleanWebpackPlugin(['dist']),新的 HtmlWebpackPlugin({文件名:'Evaluations.html',模板:'./WebResources/html/Evaluations.html'}), 新的 HtmlWebpackPlugin({文件名:'费用上传.html',模板:'./WebResources/html/ExpenseUpload.html'}), 新的 webpack.optimize.CommonsChunkPlugin({名称:'WebAPI'})],输出: {文件名:'[名称].bundle.js',路径:path.resolve(__dirname, 'dist')}}
解决方案
你应该声明导入 *.vue 文件.
例如:
vue-file-import.d.ts
声明模块*.vue";{从vue"导入 Vue;导出默认 Vue;}
I am using Typescript with Vuejs to build an application. I have several stand alone components (.vue) files that I am importing into a Typescript (.ts) file. In the Typescript file, I am importing Vue from the npm Vue library and then creating a new Vue to display my components. The error that I am seeing is:
My build system is Webpack with tsc. Why am I getting this error and how can I resolve it?
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')
}
}
解决方案
you should make a declare for import *.vue file.
such as:
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
这篇关于解决“类型 'Vue' 上不存在属性";错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!