Vue3+TS+Vite 개발 기술: 배포 및 온라인 연결 방법
1. 프로젝트 설정
시작하기 전에 먼저 Node.js와 Vue CLI가 설치되었는지 확인한 후 다음 명령을 실행합니다. 새로운 Vue3+TS+Vite 프로젝트를 생성하려면:
vue create project-name
다음으로 "수동으로 기능 선택"을 선택한 다음 "TypeScript"를 선택한 후 Enter를 눌러 설치하세요.
2. 개발 환경 구성
Vite 구성 파일 수정
프로젝트 루트 디렉터리에서 vite.config.ts 파일을 찾아 다음 내용을 수정하세요.
import { defineConfig } from 'vite' export default defineConfig({ base: './', })
이를 설정한 후 프로젝트는 현재 경로를 사용합니다. 기본 경로로 압축하세요.
배포 디렉터리 구성src/env/production.ts
파일을 열고 publicPath
를 프로젝트를 배포하려는 디렉터리로 변경합니다. 예: src/env/production.ts
文件,并将publicPath
修改为你要部署项目的目录,例如:
export default { publicPath: '/your-project-name/', }
这样设置之后,打包后的文件将会自动放在/your-project-name/
目录下。
三、项目构建与打包
构建项目
执行以下命令,将项目构建为可部署的静态文件:
npm run build
构建完成后,在项目根目录下会生成一个dist
文件夹,里面存放着打包后的静态文件。
本地测试
可以通过以下命令在本地启动一个服务器来测试打包后的项目:
npm install -g http-server cd dist http-server
然后在浏览器中打开http://localhost:8080
即可查看项目效果。
四、部署到服务器
dist
文件夹中的所有文件上传到你的服务器上,可以使用FTP工具或者其他方法进行上传。确保文件上传到了正确的目录下。配置服务器
在你的服务器上,需要配置一个nginx
(或其他类似的服务器软件)来处理静态文件的请求。假设你使用的是nginx
,则可以在配置文件中添加以下内容:
server { listen 80; server_name your-domain.com; location / { root /path/to/your-project/; try_files $uri $uri/ =404; } }
注意将your-domain.com
替换为你的域名,/path/to/your-project/
替换为你上传项目的目录。
nginx
rrreee/your-project-name/
디렉터리에 자동으로 배치됩니다. 프로젝트 빌드
다음 명령을 실행하여 프로젝트를 배포 가능한 정적 파일로 빌드합니다.rrreee
빌드가 완료되면dist가 생성됩니다. 패키지된 정적 파일을 저장하는 프로젝트 루트 디렉터리
폴더. 🎜🎜🎜🎜로컬 테스트🎜다음 명령을 통해 서버를 로컬에서 시작하여 패키지된 프로젝트를 테스트할 수 있습니다. 🎜rrreee🎜그런 다음 브라우저에서 http://localhost:8080
를 열어 프로젝트를 확인합니다. . 🎜🎜🎜🎜4. 서버에 배포🎜🎜🎜패키지 파일을 서버에 업로드🎜 dist
폴더의 모든 파일을 서버에 업로드하세요. FTP 도구나 다른 방법을 사용하여 업로드할 수 있습니다. . 파일이 올바른 디렉터리에 업로드되었는지 확인하세요. 🎜🎜🎜서버 구성🎜정적 파일에 대한 요청을 처리하려면 서버에서 nginx
(또는 기타 유사한 서버 소프트웨어)를 구성해야 합니다. nginx
를 사용한다고 가정하면 구성 파일에 다음 콘텐츠를 추가할 수 있습니다. 🎜rrreee🎜 your-domain.com
을 도메인 이름으로 바꾸고, /를 바꾸세요. path/to/your-project/
를 프로젝트를 업로드한 디렉터리로 바꿉니다. 🎜🎜🎜서버 시작🎜 nginx
서버를 다시 시작하여 구성을 적용하세요. 🎜🎜배포 확인🎜 도메인 이름이나 서버의 IP 주소를 엽니다. 모든 것이 정상이면 브라우저에서 실행 중인 프로젝트를 볼 수 있어야 합니다. 🎜🎜🎜요약🎜 위 단계를 통해 Vue3+TS+Vite 기반으로 개발된 프로젝트를 배포하고 온라인화하여 서버에서 실행할 수 있게 되었습니다. 이 글이 여러분에게 도움이 되기를 바라며, 여러분의 프로젝트가 원활하게 온라인에 진행되길 바랍니다! 🎜🎜위는 Vue3+TS+Vite 개발 기술입니다: 프로젝트를 배포하고 온라인으로 전환하는 방법입니다. 🎜🎜(위 글은 참고용이며, 구체적인 운영은 실제 상황에 따라 조정될 필요가 있습니다)🎜위 내용은 Vue3+TS+Vite 개발 기술: 프로젝트를 배포하고 온라인으로 전환하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!