首页 文章

解决“类型'Vue'上不存在属性”错误

提问于
浏览
9

我正在使用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 回答

  • 1

    我遇到了类似的问题(特别是在.vue文件中) . 我确实发现这似乎解决了问题 . 在导入.vue文件的任何位置,将ES6样式“import”更改为“require” .

    所以在你的例子中,改变:

    import Competency from '../components/competency.vue';
    

    至...

    declare var require: any;
    var Competency = require("../components/competency.vue").default;
    
  • 2

    你应该为import * .vue文件声明一个 .

    如:

    vue-file-import.d.ts

    declare module "*.vue" {
       import Vue from "vue";
       export default Vue;
    }
    
  • 0

    我试图按照这个页面https://vuejs.org/v2/guide/routing.html并得到相同的TypeScript错误,我通过强制转换Vue实例来修复它

    new Vue({
            el: '#app',
            data: {
                currentRoute: window.location.pathname
            },
            computed: {
                ViewComponent() {
                    return routes[(this as any).currentRoute] || routes['/']
                }
            },
            render (h) { return h((this as any).ViewComponent) }
        })
    
  • 2

    我在vue 2.8.2和Typescript 2.5.3中遇到了同样的错误 . 我通过将Vue实例保存在变量中然后给它一个类型来修复它 . 这可确保TS在使用选项对象进行实例化时了解所有Vue属性 .

    var VueApp: any = Vue;
    
    var App = new VueApp({
      el: "#app",
      data() {
         return {
            count: 0
         }
      },
      methods:{
        initialize() {
          this.count = count + 1; // Should work now
        }
      }
    })
    

相关问题