vscode에서 Vue 별명 경로 알림의 실현
Vue 프레임워크를 사용하여 프로젝트 개발을 진행할 때 vue.config.js에 경로 별명을 설정한 후 다른 페이지에 구성 요소를 도입하고 css를 도입하며 정적 파일 경로를 도입할 때 경로 별명을 사용하면 경로를 지능적으로 제시하지 않습니다.vscode에 Path Intellisense 플러그인을 설치했지만 소용이 없습니다.이렇게 하면 경로 맞춤법 오류의 저능 문제가 발생하기 쉬우며, 동시에 개발 효율을 떨어뜨릴 수 있다
솔루션
프로젝트 패키지.json이 있는 동급 디렉터리에서 파일 jsconfig를 만듭니다.json, 별명 경로가 제시되지 않는 문제를 해결합니다.(파일 저장을 설정한 후 편집기를 다시 시작해야 적용됩니다. 그리고.vue와.js의 마지막 파일만 식별할 수 있습니다. css 파일과 다른 정적 파일은 여전히 알림이 없습니다. 추천하지 않습니다!!!)
// .jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/\*": \['src/\*'\],
"a/\*": \["src/assets/\*"\],
"c/\*": \["src/components/\*"\],
...
}
},
"include": \["./src/\*\*/\*.vue", "./src/\*\*/\*.js"\],
"exclude": \["node\_modules"\]
}
// setting.json
"path-intellisense.mappings": {
"a": "${workspaceRoot}/src",
"c": "${workspaceRoot}/src/components",
...
}
프로젝트 중 웹 팩.base.conf.js 사용자 정의 별칭 구성
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'styles': resolve('src/assets/styles')
}
},
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
],
//
"styles/*": [
"src/assets/styles/*"
]
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"dist"
]
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
React Typescript 스니펫새로운 구성 요소를 생성할 때 동일한 코드를 입력하는 데 지쳤다면 VS Code가 제공하는 멋진 솔루션인 코드 스니펫 🔥이 있습니다. 다음은 Typescript로 React 구성 요소를 만들기 위한 두 가지 스니펫입...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
