本文记录一些vue3+typescript+less开发过程中的一些小问题。

不断开发、不断更新...

1. require引入模块

vue.config.js文件中require('path') 加载path模块，eslint报错errorRequire statement not part of import statement。

对应eslint规则：戳这里

解决方案

.eslintrc.js，关闭no-var-requires规则

module.exports = {
    rules: {
        '@typescript-eslint/no-var-requires': 'off',
    }
}

2. vue3设置别名alias

vue.config.js中设置别名alias

module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('config', resolve('src/config'))
      .set('utils', resolve('src/utils'))
      .set('components', resolve('src/components'))
      .end()
   // 设置文件扩展名，设置后在引入时，可省略扩展名
    config.resolve.extensions
      .add('ts')
  }
}

在main.ts中引入设置别名的模块时，提示Cannot find module 'config/element.config' or its corresponding type declarations

import { components, plugins } from 'config/element.config'

image

解决方案

tsconfig.jsonts配置文件中增加paths
参考文档：模块解析-路径映射

{
    "paths": {
            "@/*": ["src/*"],
            "*": ["*", "src/*"]
        }
}