분류 전체보기 (92) 썸네일형 리스트형 [Vue.js] Nuxt3 nuxi prepare 명령어란? nuxi prepare는 Nuxt 3에서 사용되는 CLI 명령어로, Nuxt 프로젝트의 빌드 준비 과정을 수행하는 역할을 합니다. 이 명령어는 Nuxt 프로젝트가 실행되기 전에 필요한 파일을 생성하고, 프로젝트 설정 및 구조를 준비하는 데 사용됩니다.nuxi prepare의 주요 기능프로젝트 설정 준비nuxi prepare는 Nuxt 프로젝트를 실행하기 전에 필요한 설정 파일을 준비하고, Nuxt가 올바르게 동작할 수 있도록 프로젝트 구조를 설정합니다. 이 과정에는 .nuxt 디렉토리 내에 필요한 파일 및 구성을 생성하는 작업이 포함됩니다.TypeScript 지원 준비Nuxt 3는 TypeScript를 기본적으로 지원합니다. nuxi prepare 명령어는 프로젝트의 TypeScript 설정을 검사하고,.. [Vue.js] nuxi란? nuxt dev와 nuxi dev 명령어 차이 nuxi란?nuxi는 Nuxt.js 프레임워크에서 제공하는 CLI(Command Line Interface) 도구로, Nuxt 3 프로젝트를 생성하고 관리하는 데 사용됩니다. Nuxt.js는 Vue.js 기반의 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 프레임워크이며, Nuxt 3부터 nuxi라는 CLI 도구가 도입되었습니다.nuxt dev와 nuxi dev 명령어 차이nuxt dev와 nuxi dev는 Nuxt.js 프로젝트에서 개발 서버를 실행하는 명령어들이지만, 두 명령어는 Nuxt 버전에 따라 다르게 사용됩니다.1. nuxt devNuxt 2에서 사용되는 명령어입니다.Nuxt 2.x 버전의 프로젝트에서 개발 서버를 실행하려면 nuxt dev를 사용합니다.nuxt 명령어는.. [Vue.js] npx란? npx란?npx는 Node.js 패키지 관리자(NPM)에서 제공하는 실행 도구입니다. 주로 npm으로 설치된 패키지나 로컬에 설치되지 않은 패키지를 쉽게 실행하기 위해 사용됩니다. 주요 기능과 특징글로벌 설치 없이 패키지 실행로컬에 설치하지 않은 패키지라도 npx를 사용하면 일회성으로 해당 패키지를 실행할 수 있습니다.예를 들어, create-react-app을 설치하지 않고 React 프로젝트를 생성할 때:npx create-react-app my-app 이 명령은 create-react-app을 설치하지 않고도 바로 실행할 수 있습니다.로컬 설치된 명령어 실행프로젝트에 로컬로 설치된 Node.js 패키지를 실행할 수 있습니다. 보통 로컬에 설치된 패키지를 실행하려면 전체 경로를 지정해야 하지만, n.. [Vue.js] Nuxt3 프로젝트에서 Node 또는 PM2로 실행하기 Nuxt 애플리케이션은 Node.js 서버에 배포하거나, 정적 호스팅을 위해 미리 렌더링하거나, 서버리스 또는 엣지(CDN) 환경에 배포할 수 있습니다. Nuxt 빌드nuxt 빌드를 실행했을 때, 생성되는 결과물이 노드 서버를 실행하는 entry point(진입점)가 됩니다.npm run build Node로 실행이렇게 하면 기본적으로 포트 3000에서 listen하는 Nuxt 서버가 실행됩니다.node .output/server/index.mjs PM2로 실행하기ecosystem.config.cjs 파일 작성하기module.exports = { apps: [ { name: 'NuxtAppName', port: '3000', exec_mode: 'cluster', .. [Vue.js] Nuxt3 렌더링 모드(Rendering Modes) 렌더링 모드(Rendering Modes) Nuxt는 다양한 렌더링 모드를 지원합니다. 기본적으로는 범용 렌더링을 사용하여 사용자 경험, 성능 및 검색 엔진 최적화를 개선하지만, 클라이언트 사이드 렌더링도 지원하며, 하이브리드 렌더링과 CDN 엣지 서버에서 애플리케이션을 렌더링하는 옵션도 제공합니다. 브라우저와 서버는 모두 Vue.js 컴포넌트를 HTML 요소로 변환할 수 있습니다. 렌더링 모드는 한 줄의 설정으로 변경할 수 있습니다. 브라우저와 서버 모두 JavaScript 코드를 해석하여 Vue.js 컴포넌트를 HTML 요소로 변환할 수 있습니다. 이 과정을 렌더링이라고 합니다. Nuxt는 유니버설 렌더링과 클라이언트 사이드 렌더링을 모두 지원하며, 두 가지 방식은 각각 장단점이 있습니다.Nuxt는 .. [Vue.js] Cannot start nuxt: Cannot find module 'pinia/dist/pinia.mjs' 오류 해결하기 Nuxt3에서 Pinia를 사용하기 위해 Nuxt 가이드 문서에 따라 @pinia/nuxt 모듈을 설치하고 예제 코드를 추가하였더니 아래와 같은 오류가 발생하였다. ERROR Cannot start nuxt: Cannot find module 'pinia/dist/pinia.mjs' 해결 방법npm install pinia 추가로 pinia 설치하다가 오류가 나는 경우가 있다.npm error code ERESOLVEnpm error ERESOLVE could not resolve 이 경우 아래 코드를 package.json 파일에 추가해준다.{ ... "overrides": { "vue": "latest" }, ...} Referencehttps://nuxt.com/modules/p.. [Vue.js] Nuxt3 nuxti18n Invalid linked format error 해결하기 nuxti18n을 적용하면서 기존에 vue-i18n에서 사용하던 국제화 텍스트들을 그대로 가져왔더니 아래와 같은 오류가 발생하였다. 오류 내용[오후 7:20:48] ERROR [unplugin-vue-i18n] Invalid linked format (error code: 10) in /Users/user/Documents/workspace/vue3/i18n/en-US.json target message: abcd1234@naver.com target message path: email 1 | abcd1234@naver.com 오류 원인이유는 vue-i18n의 v9 버전 부터 @가 vue-i18n에서 사용하는 특수문자 중 하나가 되었고, nuxti18n은 vue-i18n v9 버전을 포함.. [Vue.js] Cannot find module 'vue-framework'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? Vetur(2792) 오류 해결하기 Vue3 + Nuxt3 기반의 프로젝트를 신규 구축하다가 외부 라이브러리를 추가하려고 하였더니 아래와 같은 오류가 발생하였다. 문제 코드 오류 내용Cannot find module 'vue-framework'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option? Vetur(2792) 해결 방법tsconfig.json 파일에 아래 코드를 추가한다.{ ... "compilerOptions": { "moduleResolution": "node" }} 이전 1 2 3 4 5 ··· 12 다음