已有vue项目引入ts，找不到引入的.vue .js文件

  • Z时代
  • 2024-03-16
  • 分类：IT

简介

vue2.6版本 使用vue-class-component，vue-property-decorator，ts-loader，tslint，tslint-config-standard，tslint-loader，typescript这些插件

问题

1、npm run dev后项目不会报错
2、热更新后组件引入的.vue .js文件会报错

报错

1、Cannot find module '../../../components/loading.vue' or its corresponding type declarations.
2、Could not find a declaration file for module './search-field.js'. '/Users/mayakun/meituan/uwms_management/src/pages/errorCode/query/search-field.js' implicitly has an 'any' type.

图片

已有vue项目引入ts，找不到引入的.vue .js文件
已有vue项目引入ts，找不到引入的.vue .js文件

文件配置

tsconfig.json

{
  "compilerOptions": {
     // 编译输出目标 ES 版本
    "target": "es5",
    // 采用的模块系统
    "module": "ESNext",
    // 以严格模式解析
    "strict": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    // 启用装饰器
    "experimentalDecorators": true, // 
    // 如何处理模块
    "moduleResolution":"node"  ,
    // 给错误和消息设置样式，使用颜色和上下文。
    "pretty": true,
    "sourceMap":true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  // ts 排除的文件
  "exclude": ["node_modules"]
}

vue.config.js

const path = require('path')
const {NODE_ENV, PUBLIC_URL} = process.env
const BifrostConfigPlugin = require('@wqeqw/bos-lugin')
module.exports = {
  publicPath: PUBLIC_URL || '/', // Talos 发布必备，特定 CDN 地址
  outputDir: 'build', // Talos CI 仅识别并打包 build 目录
  // 虽然页面是一个单页应用，但是pages必须这么配置
  // 否则sw.js里的文件顺序是反的
  pages: {
    index: {
      entry: './src/main.js',
      template: './public/index.html',
      chunk: ['chunk-vendors', 'chunk-common', 'index']
    }
  },
  lintOnSave: NODE_ENV !== 'production', // 加快生产构建速度
  productionSourceMap: process.env.GENERATE_SOURCEMAP === 'true', // .env.* 中配置
  runtimeCompiler: true,
  crossorigin: 'anonymous', // CAT 上报需要
  css: {
    sourceMap: process.env.GENERATE_CSS_SOURCEMAP === 'true',
    loaderOptions: { // 向 CSS 相关的 loader 传递选项
      less: {
        javascriptEnabled: true
      }
    }
  },
  devServer: {
    open: process.platform === 'darwin',
    port: process.env.PORT,
    disableHostCheck: process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
    overlay: {
      warnings: false,
      errors: true
    },
  configureWebpack: {
    devtool: 'cheap-source-map',
    output: {
      jsonpFunction: 'webpackJsonp_saasManagement'
    },
    resolve: {
      extensions: [".ts", ".tsx", ".js", ".json"],
      symlinks: false,
      alias: {
        '@utils': path.resolve(__dirname, './src/utils'),
        '@pages': path.resolve(__dirname, './src/pages'),
        '@components': path.resolve(__dirname, './src/components'),
        '@router': path.resolve(__dirname, './src/router'),
        '@config': path.resolve(__dirname, './src/config'),
        '@mixins': path.resolve(__dirname, './src/mixins'),
        '@assets': path.resolve(__dirname, './public/assets')
      }
    },
    plugins: [
      new BifrostConfigPlugin({
        appName: 'uwmsManagement'
      })
    ],
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          enforce: 'pre',
          loader: 'tslint-loader'
        },
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        }
      ]
    }
  }
}

shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}
declare module '*.js'
declare module '@sfe/raccoon'

tslint.json

{
  "defaultSeverity": "warning",
  "extends": [
    "tslint:recommended"
  ],
  "linterOptions": {
    "exclude": [
      "node_modules/**"
    ]
  },
  "rules": {
    "indent": [true, "spaces", 2],
    "interface-name": false,
    "no-consecutive-blank-lines": false,
    "object-literal-sort-keys": false,
    "ordered-imports": false,
    "quotemark": [true, "single"]
  }
}

以上是 已有vue项目引入ts，找不到引入的.vue .js文件 的全部内容， 来源链接： utcz.com/p/935619.html

回到顶部