首页 >> js开发 >> js让IDE识别webpack的别名alias的实现方法js大全
js让IDE识别webpack的别名alias的实现方法js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
许多项目脚手架默认就会把src目录添加一个@别名,项目中实际引入时,虽然可以精简路径,但也带来一个很麻烦的问题:
IDE无法识别这些别名,因此导致无法自动完成路径、无法识别引用资源的输出、出现不必要的告警等情况。@偶然发现vscode的web项目里有一个jsconfig.json文件,如:jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}只要有这个文件,vscode就可以正常识别出别名了。后来发现JetBrains家的IDE更简单,配置指定一下就行:在项目设置的webpack标签页里,将配置文件指向/node_modules/@vue/cli-service/webpack.config.js即可。/node_modules/@vue/cli-service/webpack.config.js保存并重新打开项目以后,不只src,所有的别名比如utils等等都可以被正常识别。srcutils其实这都已经写在vue-cli3的文档里了,只是原始表述不太直观,被我一直忽略了。vue-cli3文档
IDE无法识别这些别名,因此导致无法自动完成路径、无法识别引用资源的输出、出现不必要的告警等情况。@偶然发现vscode的web项目里有一个jsconfig.json文件,如:jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*"],
"exclude": ["node_modules"]
}只要有这个文件,vscode就可以正常识别出别名了。后来发现JetBrains家的IDE更简单,配置指定一下就行:在项目设置的webpack标签页里,将配置文件指向
相关文章:
- js解决vuex数据页面刷新后初始化操作js大全
- jsvue data对象重新赋值无效(未更改)的解决方式js大全
- jsVUE项目axios请求头更改Content-Type操作js大全
- jsVue-CLI 3 scp2自动部署项目至服务器的方法js大全
- js使用React-Router实现前端路由鉴权的示例代码js大全
- JavaScriptthree.js欧拉角和四元数的使用方法
- js关于angular浏览器兼容性问题的解决方案js大全
- jsElement Input输入框的使用方法js大全
- js解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题js大全
- jsvue 页面回退mounted函数不执行的解决方案js大全