确保在要导入的文件名中包含“.vue”扩展名

Question

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

2017-08-07

117246

typescript webpack vue.js vuejs2 vue-component

我正在使用 Typescript 和 Vuejs 构建应用程序。我有几个独立组件 (.vue) 文件，我正在将它们导入到 Typescript (.ts) 文件中。在 Typescript 文件中，我从 npm Vue 库导入 Vue，然后创建一个新的 Vue 来显示我的组件。我看到的错误是：

Property x does not exist on type 'Vue'

我的构建系统是带有 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')
    }
}

Answer 1

我遇到了同样的问题，但与导出组件有关。一些 vs 代码片段创建的模板没有必要的类型，如下所示

export default {
  data() {
    return {
      x: "something",
    };
  },
  methods: {
    rename(name: string) {
      this.x = name;
    },
    
  },
};

问题是我没有添加 defineComponent() 来导出默认值。所以应该是

import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      x: "something",
    };
  },
  methods: {
    rename(name: string) {
      this.x = name;
    },
    
  },
});

确保您使用 defineComponent() 函数导出组件。

Answer 2

添加另一个答案以汇总您可能需要修复的几件事。

确保在要导入的文件名中包含“.vue”扩展名

虽然

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

和

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

都可能编译成功，但第二个将有助于避免在某些 IDE（例如 VS Code）中出现错误。

添加 shim 类型文件

正如 @May 上面指出的那样，您需要一个导入和重新导出“Vue”类型的文件。在 @May 的回答中，它被命名为 vue-file-import.d.ts ，但在互联网上的其他地方，它通常被称为 vue-shim.d.ts 。无论名称如何，所需的内容都是相同的：

// vue-file-import.d.ts

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

尝试将 shim 文件放在不同的位置

最初我将其放在 /src 中。我发现这会产生奇怪的效果。有时它会起作用，即 VS Code 错误消息消失了；而其他时候则不会，它们会重新出现。当我在项目中移动并编辑不同的文件时，这种情况会动态发生。

我后来发现建议使用内容相同的 shim 文件，但将其放在 /typings 中。我尝试了这个，它一直有效。其他人似乎对 /src 位置很满意。

Answer 3

您需要声明导入 *.vue 文件。

例如：

vue-file-import.d.ts

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