尝试在vue项目中导入和使用vue资源时出现打字稿错误。
TS2345: Argument of type 'typeof import("D:/Projects/Hospitality/content/node_modules/vue-resource/types/vue_resource")' is not assignable to parameter of type 'PluginObject<any> | PluginFunction<any>'.
Type 'typeof import("D:/Projects/Hospitality/content/node_modules/vue-resource/types/vue_resource")' is not assignable to type 'PluginFunction<any>'.
Type 'typeof import("D:/Projects/Hospitality/content/node_modules/vue-resource/types/vue_resource")' provides no match for the signature '(Vue: VueConstructor<Vue>, options?: any): void'.
很长时间以来,我一直在寻找答案,我已经厌倦了所有在stackoverflow和github上发现的与此问题有关的解决方案,但是没有一个解决方案对我有用
我的.ts文件:
import Vue from "vue";
import { Mixin } from "vue-mixin-decorator";
import Router from "vue-router";
import BootstrapVue from "bootstrap-vue";
import VueResource from "vue-resource";
import VeeValidate from "vee-validate";
Vue.use(BootstrapVue);
Vue.use(VueResource);
Vue.use(Router);
Vue.use(VeeValidate);
tsconfig文件:
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"noImplicitAny": false,
"module": "es2015",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"moduleResolution": "node",
"target": "es5",
"lib": [
"es2015",
"dom"
],
"types": [
"webpack-env"
]
},
"include": [
"./**/*"
]
}
wekpack配置:
/// <binding />
"use strict";
module.exports = (env, options) => {
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoader = require("vue-loader");
let pathsToClean = ['dist/*.*', 'dist/fonts/*.*', 'dist/images/*.*'];
let cleanOptions = {
root: __dirname + '/wwwroot/',
verbose: true,
dry: false
};
return {
mode: 'development',
entry: {
app: './wwwroot/VueApp/Home/app.ts',
mainCss: './wwwroot/VueApp/CSS/site.scss'
},
devtool: 'source-map',
plugins: [
new CleanWebpackPlugin(pathsToClean, cleanOptions),
new webpack.ProvidePlugin({
Popper: ['popper.js', 'default'],
moment: 'moment',
vueResource: 'vue-resource',
vueRouter: 'vue-router',
vuex: 'vuex'
}),
new VueLoader.VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: "[name].bundle.css"
})
],
output: {
publicPath: "/dist/",
path: path.join(__dirname, '/wwwroot/dist/'),
filename: '[name].bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /(node_modules)/,
query: {
presets: [
['env', { targets: { uglify: true } }]
]
}
},
{
test: /\.tsx?$/,
exclude: /node_modules/,
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { minimize: true, sourceMap: false } },
{
loader: 'sass-loader', options: { sourceMap: false } }
],
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: './images/[name].[ext]'
}
}
},
{
test: /\.(eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: './fonts/[name].[ext]'
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
resolve: {
alias: {
vue: 'vue/dist/vue.js'
},
extensions: ['.ts', '.js', '.vue', '.json']
}
};
};
我的vue资源是1.3.5版和打字稿版本3.1.1