我们有一个现有的 vue.js 2 项目,我们正在尝试通过运行命令 vue add typescript 在我们的项目中使用 typescript。我收到一个Cannot find module 'eslint-plugin-@typescript-eslint.
错误。我还看到 vue cli 添加了 "@vue/cli-plugin-typescript": "^4.3.1" 即使我的 "@vue/cli-service" vsersion 是 "^3.7.0"。这可能是导致以下错误的原因吗?我可能会遗漏什么?
堆栈跟踪:
ERROR Failed to compile with 1 errors 7:55:10 AM
error in ./src/main.ts
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Failed to load plugin @typescript-eslint: Cannot find module 'eslint-plugin-@typescript-eslint'
.eslintrc.js:
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint'
}
}
babel.config.js:
module.exports = {
presets: [
'@vue/app'
]
}
vue.config.js:
module.exports = {
publicPath: '/',
transpileDependencies: [
'vue-echarts',
'resize-detector'
],
configureWebpack: {
optimization: {
splitChunks: {
chunks: 'all'
}
}
}
}
tsconfig.json:
{
"compilerOptions": {
// this aligns with Vue's browser support
"target": "es5",
// this enables stricter inference for data properties on `this`
"strict": true,
// if using webpack 2+ or rollup, to leverage tree shaking:
"module": "es2015",
"moduleResolution": "node",
"experimentalDecorators": true
}
}
包.json:
{
"name": "video-audio-transcription",
"version": "4.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@aws-amplify/pubsub": "^2.1.1",
"@chenfengyuan/vue-countdown": "^1.1.2",
"@react-native-community/netinfo": "^5.5.0",
"ag-grid-community": "^21.0.1",
"ag-grid-vue": "^21.0.1",
"algoliasearch": "^3.33.0",
"apexcharts": "^3.6.12",
"auth0-js": "^9.10.4",
"aws-amplify": "^3.0.8",
"aws-amplify-vue": "^2.1.1",
"axios": "^0.19.0",
"chart.js": "^2.8.0",
"core-js": "2.6.5",
"echarts": "^4.2.1",
"file-saver": "2.0.1",
"firebase": "^6.0.4",
"instantsearch.css": "^7.3.1",
"jsonwebtoken": "^8.5.1",
"material-icons": "^0.3.1",
"perfect-scrollbar": "^1.4.0",
"postcss-rtl": "^1.5.0",
"prismjs": "^1.16.0",
"vee-validate": "^2.2.8",
"vue": "^2.6.11",
"vue-acl": "4.0.7",
"vue-apexcharts": "^1.3.5",
"vue-awesome-swiper": "^3.1.3",
"vue-backtotop": "^1.6.1",
"vue-chartjs": "^3.4.2",
"vue-clipboard2": "^0.3.0",
"vue-context": "4.0.0",
"vue-echarts": "^4.0.3",
"vue-feather-icons": "^5.0.0",
"vue-flatpickr-component": "^8.1.2",
"vue-form-wizard": "^0.8.4",
"vue-fullcalendar": "^1.0.9",
"vue-i18n": "^8.11.2",
"vue-instantsearch": "^2.2.1",
"vue-perfect-scrollbar": "^0.1.0",
"vue-prism-component": "^1.1.1",
"vue-property-decorator": "^7.2.0",
"vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.6",
"vue-select": "^3.1.0",
"vue-simple-calendar": "^4.2.2",
"vue-simple-suggest": "^1.9.5",
"vue-star-rating": "^1.6.1",
"vue-tour": "^1.1.0",
"vue-tree-halower": "^1.8.0",
"vue-video-player": "^5.0.2",
"vue2-google-maps": "^0.10.6",
"vue2-hammer": "^2.1.2",
"vuedraggable": "^2.21.0",
"vuejs-datepicker": "^1.5.4",
"vuesax": "3.11.1",
"vuex": "^3.1.1",
"xlsx": "^0.15.0"
},
"devDependencies": {
"@fullhuman/postcss-purgecss": "^1.2.0",
"@vue/cli-plugin-babel": "^3.7.0",
"@vue/cli-plugin-eslint": "^3.7.0",
"@vue/cli-service": "^3.7.0",
"axios-mock-adapter": "^1.17.0",
"node-sass": "^4.12.0",
"purgecss": "^1.3.0",
"sass-loader": "^7.1.0",
"script-loader": "0.7.2",
"tailwindcss": "^1.0.1",
"vue-template-compiler": "^2.6.10"
}
}
使用 vue cli 添加打字稿时选择的选项:
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Convert all .js files to .ts? No
? Allow .js files to be compiled? No