1、根目录创建webstorm.config.js,内容如下:
/**
* 由于 taro 不再使用传统的 webpack 配置文件,故 WebStorm 无法识别别名
* 本文件对项目无任何作用,仅作为 WebStorm 识别别名用
* 进入 WebStorm settings -> Language & Framework -> JavaScript -> Webpack,选择这个文件即可
* */
'use strict'
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = {
context: path.resolve(__dirname, './'),
resolve: {
extensions: ['.js', '.vue', '.json', 'jsx', 'scss', '.ts', '.tsx'],
alias: {
'@': resolve('src')
}
}
}
2、webstorm配置settings
进入 WebStorm settings -> Language & Framework -> JavaScript -> Webpack,选择这个文件即可
3、配置后发现在typeScript的ts中无效
在tsconfig.json文件中增加
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
{
"compilerOptions": {
"target": "es2017",
"module": "commonjs",
"removeComments": false,
"preserveConstEnums": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"outDir": "lib",
"noUnusedLocals": true,
"noUnusedParameters": true,
"strictNullChecks": true,
"sourceMap": true,
"baseUrl": ".",
"rootDir": ".",
"jsx": "react-jsx",
"allowJs": true,
"resolveJsonModule": true,
"typeRoots": [
"node_modules/@types"
],
"paths": {
"@/*": ["src/*"]
}
},
"include": ["./src", "global.d.ts"],
"exclude": [
"node_modules",
"dist"
],
"compileOnSave": false
}
此文件中的paths要和webpack中的alias配置一致,且baseURl不能省略