本文記錄一些vue3+typescript+less開(kāi)發(fā)過(guò)程中的一些小問(wèn)題贞奋。
不斷開(kāi)發(fā)滑燃、不斷更新...
1. require引入模塊
vue.config.js文件中require('path') 加載path模塊放椰，eslint報(bào)錯(cuò)errorRequire statement not part of import statement。
對(duì)應(yīng)eslint規(guī)則：戳這里
解決方案
.eslintrc.js蒸眠，關(guān)閉no-var-requires規(guī)則
module.exports = {
rules: {
'@typescript-eslint/no-var-requires': 'off',
}
}
2. vue3設(shè)置別名alias
vue.config.js中設(shè)置別名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()
// 設(shè)置文件擴(kuò)展名前翎，設(shè)置后在引入時(shí)，可省略擴(kuò)展名
config.resolve.extensions
.add('ts')
}
}
在main.ts中引入設(shè)置別名的模塊時(shí)桑阶，提示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/*"]
}
}
