Vue.js 환경 구축 시 발생했던 오류(executionpolicy)

1. vue cli 설치 후 vue 명령어 접근 불가능

vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\User\user\AppData\Roaming\npm\vue.ps

 

npm install -g @vue/cli
vue create my-project

vue-cli를 설치 후 vue를 접근할 수 없었다.

이는 PowerShell에서 악의적인 스크립트를 실행을 방지하기 위한 설정때문이다. PowerShell execution policies는 다음과 같이 분류한다. 

 

AllSigned: 모든 스크립트와 구성 파일에 신뢰할 수 있는 발행자의 서명이 존재할 경우 실행 가능하다.
Bypass: 경고나 안내 없이 어떤 것도 실행 가능하다.
Default: Windows 클라이언트는 Restricted, Windows 서버는 RemoteSigned이 기본으로 설정된다.
RemoteSigned: 인터넷에서 다운받은 스크립트는 실행하지 않고, 로컬의 스크립트만 디지털 서명 없이 실행 가능하다.
Restricted: 스크립트를 허용하지 않는다. 스크립트 파일들의 실행을 막는다. ex) .ps1xml, .psm1, .ps1
Undefined: 정의되지 않은 경우 Default 실행정책 따른다.
Unrestricted: 서명되지 않은 스크립트 실행 가능하다. 경고는 해준다.

 

PowerShell execution policies의 자세한 사항은 아래 링크를 첨부한다.

https://www.sqlshack.com/choosing-and-setting-a-powershell-execution-policy/

Choosing and Setting a PowerShell Execution Policy

 

해결방법

$ get-executionpolicy
// 현재 executionpolicy 상태 확인

$ set-executionpolicy remotesigned
// unrestricted보다 상대적으로 안전한 remotesigned으로 바꿔준다.

참고로 관리자 권한으로 실행한 PowerShell에서 명령어를 입력해야 한다.

 

2. vue init과 vue create의 차이

vue init으로 생성하는 방법은 vulnerablilites이 많다. 

vue create는 심플하고 바벨, 타입스크립트, PWA등 옵션을 수동으로 선택할 수 있다.

심플하게 시작하고 후에 라이브러리들을 추가하는 vue create방법이 많이 사용된다.

 

3. Vue.js is not detected

vue-cli로 설치하는 경우 개발자 모드에서 vue devtools가 Vue.js is not detected 오류와 함께 작동하지 않았다.

 

시행착오1. 크롬 익스텐션의 설정에서 로컬 파일 URL 접근 허용 누르기

시행착오2. app.config.performance = true 코드 추가

해결. Vue.js 베타버전 익스테션 설치, 베타버전에 대한 설명은 아래 링크를 첨부한다.

 

https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension

Introduction | Vue.js

 

 

4. 기타 Vue.js 관련 메모

0. npm init vue@latest

1. <script setup >
The code inside is compiled as the content of the component's setup() function. This means that unlike normal <script>, which only executes once when the component is first imported, code inside <script setup> will execute every time an instance of the component is created.

2. <style scoped>
A <style> tag can have scoped or module attributes (see SFC Style Features for more details) to help encapsulate the styles to the current component. Multiple <style> tags with different encapsulation modes can be mixed in the same component.